源码在哪里 老师
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>