html+css+jQuery+JavaScript實現tab自動切換功能
阿新 • • 發佈：2017-08-13
() conf charset 臨時 effect 保存 sheet http oat
tab1.html內容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tab選項卡</title> <style> * { margin: 0; padding: 0; } ul,li { list-style: none; } body { background-color: #323232; font-size: 12px; font-family: "微軟雅黑"; margin: 100px; } </style> <link rel="stylesheet" href="tab1.css" /> <script src="../jquery-2.1.0.js"type="text/javascript"></script> <script src="tab1.js" type="text/javascript"></script> </head> <body> <div class="js-tab tab" data-config=‘{ "triggerType": "mouseover", "effect": "fade", "invoke": 2, "auto": 3000 }‘> <ul class="tab-nav"> <li class="actived"> <a href="javascript:void(0);">新聞</a> </li> <li> <a href="#">娛樂</a> </li> <li> <a href="#">電影</a> </li> <li> <a href="#">科技</a> </li> </ul> <div class="content-wrap"> <div class="content-item current" style="overflow: hidden;"> <img src="a.jpg" /> </div> <div class="content-item" style="overflow: hidden;"> <img src="b.jpg" /> </div> <div class="content-item" style="overflow: hidden;"> <img src="c.jpg" /> </div> <div class="content-item" style="overflow: hidden;"> <img src="d.jpg" /> </div> </div> </div> <script> $(function() { // TAB var tab1 = new Tab($(".js-tab").eq(0)); // }); </script> </body> </html>
tab1.css內容
.tab{width: 300px;} .tab .tab-nav{height: 30px;} .tab .tab-nav li {float: left;margin-right: 5px;background-color: #767676;border-radius: 3px 3px 0 0;} .tab .tab-nav li a{display: block;height: 30px; padding: 0 20px; color: #FFFFFF;line-height: 30px; text-decoration: none;} .tab .tab-nav li.actived{background-color: #FFFFFF;} .tab .tab-nav li.actived a {color: #777;} .tab .content-wrap{background-color: #FFFFFF;padding: 5px;height: 200px;} .tab .content-wrap .content-item {position:absolute; height: 200px; width:290px; display: none;} .tab .content-wrap {display: block;overflow: hidden;} .tab .content-wrap .current{display: block;overflow: hidden;}
tab1.js內容
;(function($){ var Tab = function(tab){ var _this_ = this; //保存單個tab組件 this.tab = tab; //默認配置參數 this.config = { //用來定義鼠標的觸發類型，是click還是mouseover "triggerType": "mouseover", //用來定義內容切換效果，是直接切換還是淡入淡出效果 "effect": "default", //默認展示第幾個tab "invoke": 1, //用來定義tab是否自動切換，當指定了時間間隔，就表示自動切換，並且切換時間為指定的時間間隔 "auto": false }; //如果配置參數存在，就擴展掉默認的配置參數 if(this.getConfig()){ $.extend(this.config, this.getConfig()); }; //保存tab標簽列表、對應的內容列表 this.tabItems = this.tab.find("ul.tab-nav li"); this.contentItems = this.tab.find("div.content-wrap div.content-item"); //保存配置參數 var config = this.config; if(config.triggerType === "click"){ this.tabItems.bind(config.triggerType, function(){ _this_.invoke($(this)); }); }else if(config.triggerType === "mouseover" || config.triggerType != "click"){ this.tabItems.mouseover(function(){ _this_.invoke($(this)); }); }; //自動切換功能，當配置了時間，我們就根據時間間隔進行自動切換 if(config.auto){ //定義一個全局的定時器 this.timer = null; //計數器 this.loop = 0; this.autoPlay(); //鼠標放到選中的區域，停止輪播，鼠標移開，開啟自動輪播 this.tab.hover(function(){ window.clearInterval(_this_.timer) },function(){ _this_.autoPlay(); }) }; //設置默認顯示第幾個tab if(config.invoke > 1){ this.invoke(this.tabItems.eq(config.invoke - 1)); }; }; Tab.prototype = { //自動間隔時間切換 autoPlay:function(){ var _this_ = this, tabItems = this.tabItems, //臨時保存tab列表 tabLength = tabItems.size(),//tab的個數 config = this.config; this.timer = window.setInterval(function(){ _this_.loop++; if(_this_.loop>=tabLength){ _this_.loop = 0; }; tabItems.eq(_this_.loop).trigger(config.triggerType) },config.auto) }, //事件驅動函數 invoke:function(currentTab){ var _this_ = this; /*** * 要執行Tab的選中狀態，當前選中的加上activd（標記為白底） * 切換對應的tab內容，要根據配置參數的effect是default還是fade **/ var index = currentTab.index(); //tab選中狀態 currentTab.addClass("actived").siblings().removeClass("actived"); //切換對應的內容區域 var effect = this.config.effect; var conItems = this.contentItems; if(effect === "default" || effect != "fade"){ conItems.eq(index).addClass("current").siblings().removeClass("current"); }else if(effect === "fade"){ conItems.eq(index).fadeIn().siblings().fadeOut(); } //註意：如果配置了自動切換，記得把當前的loop的值設置成當前的tab的index if(this.config.auto){ this.loop = index; }; }, //獲取配置參數 getConfig:function(){ //拿一下tab elem節點上的data-config var config = this.tab.attr("data-config"); //console.log(config) //確保有配置參數 if(config && config!=""){ return $.parseJSON(config); }else{ return null; } } }; window.Tab = Tab; })(jQuery);
代碼源自慕課網：http://www.imooc.com/learn/825
期待共同學習進步。。。
謝謝
html+css+jQuery+JavaScript實現tab自動切換功能