设置了默认显示第几个tab后,刷新时会先显示第一个tab然后马上跳到自己设定的那个tab,开始播放,这是怎么回事

来源:5-2 默认显示第几个tab

洛洛

2018-04-26 11:09

// 立即执行函数
;(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)


写回答 关注

0回答

还没有人回答问题,可以看看其他问题

JS插件开发之-Tab选项卡

Tab选项卡,通过教程学习,我们一一剖析它的实现原理

19821 学习 · 54 问题

查看课程

相似问题