;((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);
_this.tabContents = _this.tab.find(".content-wrap .content-item");YYYYYYYYYYYYYYYYYY _this.tabContents = _this.tab.find(".tab-content .tab-content-item");XXXXXXXXXXXXXX
兄弟别改类名行不,一人一套代码最后不乱才怪。
果然了 这样真的就解决了呢
已解决。把triggerType这个配置参数==="mouseover"的时候,改成bind()方法来写,然后再在autoPlay()函数里面的tabItems.eq(_this_.loop).trigger(config.triggerType);这句后面加上鼠标移出时触发这个事件:
if (_this_.config.auto) {
tabItems.eq(_this_.loop).trigger("mouseout");
}
这样就好了。