源自:5-2 默认显示第几个tab
设置了默认显示第几个tab后,刷新时会先显示第一个tab然后马上跳到自己设定的那个tab,开始播放,这是怎么回事
// 立即执行函数
;(function($){
var Tab=function(tab){
var _this=this;
this.tab=tab;
this.config={
'triggerType':"mouseover",
'effect':'default',
'invoke':1,
'auto':false
};
// console.log(1)
console.log(typeof this.getConfig());//object
if(this.getConfig())
{
$.extend(this.config,this.getConfig())
}
// console.log(this.config)
this.tabItems=this.tab.find("ul.tab-nav li");
this.contentItems=this.tab.find("div.content-box div.content-item")
// 保存配置参数
var config=this.config;
if(config.triggerType==='click')
{
this.tabItems.bind(config.triggerType,function(){
_this.invoke($(this))
})
}
// config.triggerType!='click'是为了防止配置参数triggerType写成无效事件
else if(config.triggerType==='mouseover'||config.triggerType!='click')
{
this.tabItems.bind('mouseover',function(){
_this.invoke($(this))
})
}
// 实现自动轮播
if(this.config.auto!=false)
{
this.timer=null;
this.loop=0;
this.autoPlay()
var _this=this
this.tab.hover(function(){
console.log(111)
clearInterval(_this.timer)
},function(){
_this.autoPlay()
})
}
// 设置默认第一显示
if(this.config.invoke>1)
{
this.invoke(this.tabItems.eq(this.config.invoke-1))
}
}
Tab.prototype={
getConfig:function(){
// config是一个字符串
var config=this.tab.attr("data-config");
// 确保有配置参数
if(config&&config!='')
{
return $.parseJSON(config)
}else
{
return null
}
},
//事件驱动函数
invoke:function(currentTab){
currentTab.addClass("active").siblings().removeClass("active")
// console.log(1)
// 根据点击的tab的索引去显示下面的内容
var index=currentTab.index();
var effect=this.config.effect
console.log(effect)
// console.log(index)
var contentitem=this.contentItems
// console.log(contentitem.eq(index))
if(effect=="default")
{
console.log(1)
contentitem.eq(index).addClass("current").siblings().removeClass("current")
}else
{
contentitem.eq(index).fadeIn().siblings().fadeOut()
}
// 当手动去点击或者移动鼠标导致tab的index改变时,自动切换要跳到index的下一个
if(this.config.auto)
{
this.loop=index
}
},
// 自动播放事件
autoPlay:function()
{
var tabItems=this.tabItems;
var length=tabItems.length;
// console.log(length)
var config=this.config
var _this=this
clearInterval(this.timer)
this.timer=setInterval(function(){
_this.loop++;
if(_this.loop>=length)
{
_this.loop=0;
}
tabItems.eq(_this.loop).trigger(config.triggerType)
if (_this.config.auto) {
tabItems.eq(_this.loop).trigger("mouseout");
}
console.log(tabItems.eq(_this.loop))
console.log(1)
},config.auto)
}
}
// 把Tab注册到window全局上
// 在这个立即执行函数之外可以访问到Tab
window.Tab=Tab;
})(jQuery)
提问者:洛洛
2018-04-26 11:09