this.tab.hover()方法执行有问题,自动播放到第二个就停止了

来源:5-1 自动切换

鄢栋

2017-07-03 17:46

;((function($){
	//定义构造函数Tab
	var Tab = function(tab){
		var _this = this;
		console.log(_this);
		//保存单个tab组件
		_this.tab = tab;
		console.log(_this.tab);
		//默认的配置参数
		_this.config = {
			//tab-nav的事件触发类型,是click还是mouseover还是其他
			"triggerType": "click",
			//切换tab的效果
			"effect": "default",
			//默认选中第几个tab
			"invoke": 1,
			//是否自动播放,当指定了时间间隔就表示自动切换,并且切换时间为指定的时间间隔
			"auto": 3000
		}
		//扩展配置参数
		if(_this.getConfig()) {
			console.log(_this.getConfig());
			$.extend(_this.config,_this.getConfig());
		}
		console.log(_this.config);

		//分别保存tab选项卡的切换键和内容区,绑定事件
		_this.tabItems = _this.tab.find("ul.tab-nav li");
		_this.tabContents = _this.tab.find(".tab-content .tab-content-item");

		var config = _this.config;
		if (config.triggerType === "click") {
			_this.tabItems.bind("click",function(){
				_this.invoke($(this));
			});
		}else if (config.triggerType === "mouseover" || config.triggerType != "click") {
		        /*修改这里*/
			/*_this.tabItems.mouseover(function(){
				_this.invoke($(this));
			});*/
			_this.tabItems.bind("mouseover",function(){
				_this.invoke($(this));
			});
		}else {
			aletr("出错了");
		}

		if (config.auto) {
			//定义一个全局的定时器
			_this.timer = null;
			//计数器
			_this.loop = 0;

			//自动播放
			_this.autoPlay();

			_this.tabItems.hover(function(){
				console.log("this",this);
				console.log("_this",_this);
				window.clearInterval(_this.timer);
			},function(){
				_this.autoPlay();
			});

		}

	}

	//定义原型
	Tab.prototype = {
		//获取配置参数
		getConfig: function() {
			//获取人工配置的config参数
			var config = this.tab.attr("data-config");
			//处理获取到的config参数,先确保有这个配置参数
			if(config && config != "") {
				return $.parseJSON(config);
			}else {
				return null;
			}
		},
		invoke: function(currentTab) {
			var _this = this;
			var effect = _this.config.effect;
			var index = currentTab.index();

			currentTab.addClass("actived").siblings().removeClass("actived");
			if (effect === "default" || effect != "fade") {
				_this.tabContents.eq(index).addClass("current").siblings().removeClass("current");
			}else if (effect === "fade") {
				_this.tabContents.eq(index).fadeIn().siblings().fadeOut();
			}

			//如果设置了自动切换,就把当前的loop值设置为当前的index
			if (_this.config.auto) {
				_this.loop = index;
			}
		},
		autoPlay:function() {
			var _this_ = this,
			    tabItems =_this_.tabItems,
			    tabLength = tabItems.size(),
			    config = _this_.config;
			_this_.timer = setInterval(function(){
				_this_.loop++;
				if (_this_.loop > (tabLength - 1)) {
					_this_.loop = 0;
				}
				console.log("->",_this_.loop);
				tabItems.eq(_this_.loop).trigger(config.triggerType);
				/*加上这一句*/
				if (_this_.config.auto) {
                                    tabItems.eq(_this_.loop).trigger("mouseout");
                                }
			},config.auto);

		}
	}

	//将Tab类挂在window对象上
	window.Tab = Tab;
}))(jQuery);


写回答 关注

3回答

  • 慕移动7441361
    2019-05-10 16:39:47
    _this.tabContents = _this.tab.find(".content-wrap .content-item");YYYYYYYYYYYYYYYYYY
     _this.tabContents = _this.tab.find(".tab-content .tab-content-item");XXXXXXXXXXXXXX

    兄弟别改类名行不,一人一套代码最后不乱才怪。

  • 胖官与他的面包
    2017-09-28 10:18:44

    果然了 这样真的就解决了呢

  • 鄢栋
    2017-07-03 17:57:31

    已解决。把triggerType这个配置参数==="mouseover"的时候,改成bind()方法来写,然后再在autoPlay()函数里面的tabItems.eq(_this_.loop).trigger(config.triggerType);这句后面加上鼠标移出时触发这个事件:

    if (_this_.config.auto) {

    tabItems.eq(_this_.loop).trigger("mouseout");

    }

    这样就好了。

    慕函数966... 回复慕粉2351...

    就是啊,,,我也想问这个问题。。。

    2018-02-25 17:04:29

    共 2 条回复 >

JS插件开发之-Tab选项卡

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

19821 学习 · 54 问题

查看课程

相似问题