选项卡（可自动播放，可点击的选项卡）
直接上代码，先是html部分：
1 <div class="tabs"> 2 <ul> 3 <li>tab1</li> 4 <li>tab2</li> 5 <li>tab3</li> 6 <li>tab4</li> 7 </ul> 8 <div class="tabContent"> 9 <div>tab1-content</div> 10 <div>tab2-content</div> 11 <div>tab3-content</div> 12 <div>tab4-content</div> 13 </div> 14 </div>
第二部分是js部分，在使用之前需要先引入zepto.js
1 //t时间，a自动播放 2 $.fn.tabs = function(t,a){ 3 //默认时间 2s 4 if(!t) t = 2000; 5 if(a!==false) a = true; 6 7 //total li 8 var totalLi = $(this).children("ul").children("li").size(); 9 var current = 0; 10 var preIndex; 11 var timerPlay; 12 var _this = $(this); 13 var divChildrenContent = _this.children("div").eq(0).children("div"); 14 var liChildren = _this.children("ul").eq(0).children("li"); 15 16 //reset 所有状态 17 divChildrenContent.eq(0).show(); 18 liChildren.eq(0).addClass("current"); 19 20 liChildren.click(function(){ 21 //clear 自动播放timer 22 clearInterval(timerPlay); 23 //重新获取current index 24 current = $(this).index(); 25 liChildren.eq(current).addClass("current").siblings("li").removeClass("current"); 26 divChildrenContent.eq(current).show().siblings("div").hide(); 27 28 //自动播放start 29 if(a) AutoPlay(t); 30 }); 31 32 var tab = function(){ 33 current++; 34 current%=totalLi; 35 autoTabs(); 36 }; 37 38 var autoTabs = function (){ 39 divChildrenContent.eq(current).show().siblings("div").hide(); 40 liChildren.eq(current).addClass("current").siblings("li").removeClass("current"); 41 } 42 var AutoPlay = function (){ 43 timerPlay = setInterval(function(){ 44 tab(t); 45 },t); 46 } 47 if(a) AutoPlay(t); 48 }
第三部分，是直接使用
//直接调用,第二个参数 不写时 ，默认是自动播放的，只有写成false时才会取消自动播放 $(".tabs").tabs('2000');//可自动播放 $(".tabs").tabs('2000',true);//可自动播放 $(".tabs").tabs('2000',false);//不可自动播放
顺手把tabs部分的css也粘贴上来吧
1 /**tab strat**/ 2 .tabs { 3 width: 100%; 4 min-width: 320px; 5 max-width: 640px; 6 height: auto; 7 border: 1px solid black; 8 } 9 .tabs ul li { 10 float: left; 11 width: 25%; 12 height: 3em; 13 line-height: 3em; 14 text-align: center; 15 } 16 .tabs ul:after { 17 content: ''; 18 display: block; 19 width: 0; 20 height: 0; 21 clear: both; 22 } 23 .tabs ul li:nth-child(1):after 24 ,.tabs ul li:nth-child(2):after 25 ,.tabs ul li:nth-child(3):after { 26 content: ''; 27 display: block; 28 float: right; 29 width: 1px; 30 height: 2em; 31 line-height: 2em; 32 margin-top: .5em; 33 background: #000; 34 } 35 36 .tabContent { 37 width: 100%; 38 height: 10em; 39 } 40 .tabContent div { 41 width: 100%; 42 height: 100%; 43 display: none; 44 }
OK搞定收工
