哪位朋友可以提供一下第六章的源代码，这里谢谢了！

jquery 1.8后 length取代了 size()  ,因为length不需要返回一个函数调用，更优秀。 用tabItems.length。 

triggerType 为click 是可以的

getConfig:function(){

var config=this.tab.attr("data-config");

if (config&&config!='') {

return JSON.parse(config);

}else{

return null;

}

},//注意逗号！！！！，不是分号，看看这儿你是否写对了

素材？是指的img图片吗？直接网上随便找几张就可以了，主要的是功能，熟悉面向对象的写法，图片效果在这里是次要的。

应该是这样的

你的auto后面多带了一个逗号

对的，这个也是一样的啊

代码好乱。。。

内部样式比较不利于维护，有代码冗余，外部样式表主要是服务器要发生一次请求申请，它主要实现了结构与样式的相分离，有利于维护。

可以用面向过程的方式写，不过很浪费时间，面向对象更有条理性，而且用上jquery是最好的；jquery用起来更加方便 document.getElementById("tab");和$("#tab")你选择用哪个呀？当然是后者好许多，jquery就是得多用，不懂就百度多敲几遍哪些基本的用法也就知道了，但关键还是面向对象的思想！

fadeIn()是jq提供的方法，里面传入的是参数是时间，不能穿个类名啊，淡入淡出之后不需要addClass了

最停留：http://zuitingliu.com/?p=163

好像没有地方能下载，只能看着视频敲代码

问题描述不是很明白，有可能跟"this指针"有关系。

其实这样写也可以，但是为了节省内存消耗。就把他们放在了prototype里面，详细内容可以看https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997235247b53be560ab041a7b10360a567422a78000

bind(type,[data],fn)，为每个匹配元素的特定事件绑定事件处理函数，是直接绑定在元素上.

优点：

    ①. 这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案

    ②. .click(), .hover()等事件绑定，都是bind的一种简化处理方式

缺点：

①. 它会绑定事件到所有的选出来的元素上，当绑定的元素较多时(如：表格的每个单元格)，会查找和遍历每个单元格，导致脚本执行速度明显变慢；且保存表格的多个单元格元素和相应的处理程序也会占用大量内存。简言之：绑定元素较多时，效率低下，占用内存。

②. bind只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件，即不能动态绑定到新增的元素上

③. 当页面加载完的时候，才可以进行bind()

解决：事件委托/事件代理

$(selector).on(events,[childSelector],[data],fn) ，在被选当前及未来的元素及子元素上添加一个或多个事件处理程序.

说明：

事件绑定与解绑一共有3组（bind、live、delegate），为了避免混乱，自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。（推荐使用）

不知道， 但推荐这个软，绝对好用https://processon.com/

加入一个可以判断的动画队列element.is(":animated")

是为了避免变量全局的污染，和代码重名。

tab.js:

;(function($){

var Tab = function(tab){

var _this_ = this;

//保存tab 配置

this.tab = tab;

this.config = {

"triggerType":"mouseover",//事件类型

"effect":"default",//淡入淡出、直接切换

"invoke":1,//默认显示第几个tab

"auto":false//是否自动切换

};

//如果配置参数存在

if(this.getConfig()){

$.extend(this.config, this.getConfig());

}

//获取对象tab contentItems等

this.tabItems = this.tab.find('ul.tab-nav li');

this.contentItems = this.tab.find('div.content-wrap div.content-item');

//保存默认配置

var config = this.config;

if(config.triggerType === 'click'){

this.tabItems.bind(config.triggerType,function(){

_this_.invoke($(this));//标记内容的切换

});

}else if(config.triggerType === 'mouseover'||config.triggerType != 'click'){

this.tabItems.mouseover(function(){

var self = $(this);

this.timer = setTimeout(function(){

_this_.invoke(self);

},300);

}).mouseout(function(){

window.clearTimeout(this.timer);

});

};

if(config.auto){

this.timer = null;

//计数器

this.loop = 0;

this.autoPlay();

this.tab.hover(function(){

window.clearInterval(_this_.timer);

},function(){

_this_.autoPlay();

});

};

if(config.invoke>1){

this.invoke(this.tabItems.eq(config.invoke-1));

}

};

Tab.prototype = {

//自动间隔事件切换

autoPlay:function(){

var _this_ = this;

var tabItems = this.tabItems;

var tabLength = tabItems.length;

var config = this.config;

this.timer = window.setInterval(function(){

_this_.loop++;

if(_this_.loop>=tabLength){

_this_.loop = 0;

}

tabItems.eq(_this_.loop).trigger(config.triggerType);

},config.auto);

},

//事件

invoke:function(currentTab){

var _this_ = this;

//tab状态

var index = currentTab.index();

currentTab.addClass('actived').siblings().removeClass('actived');

var effect  =this.config.effect;

var conItems = this.contentItems;

if(effect === "default"||effect !== "fade"){

conItems.eq(index).add("current").siblings().remove("current");

}else if(effect === "fade"){

conItems.eq(index).fadeIn().siblings().fadeOut();

};

//鼠标移入时保持当前的index与currentIndex一致 

if(this.config.auto){

this.loop = index; 

}

},

//获得配置参数

getConfig:function(){

var config = this.tab.attr("data-config");

if(config && config != ''){

return  $.parseJSON(config);

}else{

return null;

}

}

};

Tab.init = function(tabs){

var _this_ = this;

tabs.each(function(){

new _this_($(this));

});

};

window.Tab = Tab;

})(jQuery);

===================================================================

tab.css:

.tab{width: 300px;}

.tab .tab-nav{height: 30px;}

.tab .tab-nav li{float: left;margin-right: 5px;border-radius: 3px 3px 0 0;background-color: #767676;}

.tab .tab-nav li a{display: block;line-height: 30px;padding: 0 20px; color: #fff;text-decoration: none;}

.tab .tab-nav li.actived{background-color: #fff;}

.tab .tab-nav li.actived a{color: #777;}

.tab .content-wrap{background-color: #fff;height: 200px;padding: 5px;}

.tab .content-wrap .content-item{position:absolute;height: 200px;display: none;overflow: hidden;}

.tab .content-wrap .current{display: block;}

//=============================

.tab .content-wrap .content-item img{height: 200px;width: 290px;}

//===============网上的图片较大，限制图片大小，以免div包不住图片

====================================================================

tab.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{margin: 0;padding: 0;}

ul li{list-style: none;}

body{padding: 60px;background-color: #323232;font-size: 12px;font-family: "微软雅黑";}

</style>

<link rel="stylesheet" href="css/tab.css">

<script src="js/jquery-3.1.1.min.js"></script>

<script src="js/tab.js"></script>

</head>

<body>

<div class="js-tab tab" data-config='{

"triggerType":"click",

"effect":"fade",

"invoke":2,

"auto":1000

}'>

<ul class="tab-nav">

<li class="actived"><a href="javascript:;">新闻</a></li>

<li><a href="javascript:;">娱乐</a></li>

<li><a href="javascript:;">电影</a></li>

<li><a href="javascript:;">科技</a></li>

</ul>

<div class="content-wrap">

<div class="content-item current"><img src="img/a.jpg"/></div>

<div class="content-item"><img src="img/b.jpg"/></div>

<div class="content-item"><img src="img/c.jpg"/></div>

<div class="content-item"><img src="img/d.jpg"/></div>

</div>

</div>

<script>

$(function(){

Tab.init($(".js-tab"));

});

</script>

</body>

</html>

可能是 var tab1 = new Tab($(".js-tab").eq(0));这里的 “.js-tab”少了个点，我也是跟你一样情况，找了很久。

我也遇到了同样的问题 triggerType 不能为mouseover ，否则不能默认自动播放

在fade执行前加一个stop()方法先结束动画然后再执行.

多听几遍，或许能听出其他的道道来。