为了账号安全,请及时绑定邮箱和手机立即绑定

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

;((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 回答

_this.tabContents = _this.tab.find(".content-wrap .content-item");YYYYYYYYYYYYYYYYYY
 _this.tabContents = _this.tab.find(".tab-content .tab-content-item");XXXXXXXXXXXXXX

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

if (_this_.config.auto) {

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

}

这样就好了。

3 回复 有任何疑惑可以回复我~
#1

慕粉2351585973

为什么老师的 没有问题呢???? 另外楼上的方法试了 好使!!!
2017-09-05 回复 有任何疑惑可以回复我~
#2

慕函数9666145 回复 慕粉2351585973

就是啊,,,我也想问这个问题。。。
2018-02-25 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信