先上效果圖：
直接上代碼：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src='jquery.js'></script> <script src='tab.js'></script> <style> *{margin:0px;padding:0px;background-color: #757575} .tab{margin-left: 100px;margin-top: 100px;height: 250px;} .tab .tab-ul{height: 30px;} .tab .tab-ul .tab-li{float:left;margin-right: 5px;list-style: none; background-color: #323232;color: #fff;display: block;width: 50px;border-radius: 5px 5px 0 0 ;text-align: center;cursor: pointer;} .tab .tab-ul .active{color: #323232; background-color: #fff;} .tab .content-warp{width: 200px;height: 200px;background-color: #fff;overflow: hidden;padding:5px;} .tab .content-warp .content{width: 200px;height: 200px;display: none} .tab .content-warp .content img{width:100%;height: 100%;} .tab .content-warp .current{display: block} </style> </head> <body> <div class="tab" data-config='{ "event":"click", "time":false, "type":"default" }'> <ul class="tab-ul"> <li class="tab-li active">新聞</li> <li class="tab-li">熱點</li> <li class="tab-li">軍事</li> <li class="tab-li">社會</li> </ul> <ul class="content-warp"> <li class="content current"><img src="img/1.jpg"></li> <li class="content"><img src="img/2.jpg"></li> <li class="content"><img src="img/3.jpg"></li> <li class="content"><img src="img/4.jpg"></li> </ul> </div> <div class="tab" data-config='{ "event":"mouseover", "time":false, "type":"fade" }'> <ul class="tab-ul"> <li class="tab-li active">新聞2</li> <li class="tab-li">熱點2</li> <li class="tab-li">軍事2</li> <li class="tab-li">社會2</li> </ul> <ul class="content-warp"> <li class="content current"><img src="img/1.jpg"></li> <li class="content"><img src="img/2.jpg"></li> <li class="content"><img src="img/3.jpg"></li> <li class="content"><img src="img/4.jpg"></li> </ul> </div> <div class="tab" data-config='{ "event":"click", "time":3000, "type":"fade" }'> <ul class="tab-ul"> <li class="tab-li active">新聞2</li> <li class="tab-li">熱點2</li> <li class="tab-li">軍事2</li> <li class="tab-li">社會2</li> </ul> <ul class="content-warp"> <li class="content current"><img src="img/1.jpg"></li> <li class="content"><img src="img/2.jpg"></li> <li class="content"><img src="img/3.jpg"></li> <li class="content"><img src="img/4.jpg"></li> </ul> </div> <script> $(".tab").tab(); </script> </body> </html>
插件tab.js!function( var Tab = function(ele){
this.ele = ele; config = JSON.parse(ele.attr('data-config')); //默認配置 this.config = { "event":"mouseover",//觸發事件 "time":2000,//切換時間 false 為不切換 "invoke":1,//默認tab "type":"default"//切換方式 默認和淡出 }; $.extend(this.config, config); //默認地址 this.index = this.config.invoke; //點擊事件 this.switch(); //默認顯示 this.invoke(); //輪播 this.loopfun(); }; Tab.prototype = { "switch":function(){ ele = this.ele; var that = this; config = this.config; event = config.event == "click"?"click":"mouseover"; if(config.type == "default"){ ele.find(".tab-li").on(event, function(e, par1){ //par1存在則為模擬請求 $(this).addClass("active").siblings().removeClass("active");//tab var index = $(this).index(); that.ele.find(".content").eq(index).show().addClass("current").siblings().removeClass("current").hide(); if(that.loop && !par1){ clearInterval(that.loop); that.loop = null; } that.addIndex(index); }).on('mouseout', function(){ if(!that.loop){ that.loopfun(); } }); }else{ ele.find(".tab-li").on(event, function(e, par1){ //par1存在則為模擬請求 $(this).addClass("active").siblings().removeClass("active");//tab var index = $(this).index(); that.ele.find(".content").eq(index).fadeIn().siblings().fadeOut(); if(that.loop && !par1){ clearInterval(that.loop); } that.addIndex(index); }).on('mouseout', function(){ that.loopfun(); }); } }, "invoke":function(){ ele = this.ele; config = this.config; ele.find('.tab-li').eq(config.invoke-1).addClass("active").siblings().removeClass("active"); ele.find('.content').eq(config.invoke-1).addClass("current").siblings().removeClass("current"); },
"addIndex":function(index){ var count = this.ele.find('.tab-li').length; if(++index>=count){ this.index = 0; }else{ this.index = index; } }, "loopfun":function(){ if(this.config.time && parseInt(this.config.time)){ that = this; this.loop = setInterval(function(){ event = that.config.event == "click"?"click":"mouseover"; that.ele.find(".tab-li").eq(that.index).trigger(event, ['tri']); }, that.config.time) } } } //注冊成jquery方法 $.fn.extend({ tab:function(){ this.each(function(){ new Tab($(this)) }) return this; } }) window.Tab = Tab; }(jQuery)
標簽可隨意設置成文本或其他內容，可自行修改。
依自己的理解對切換邏輯進行修改：
1.mousove觸發切換時只有mouseout才會繼續輪訓切換
2.click觸發切換時當鼠標在切換頁也只有mouseout才會繼續輪訓切換