选项卡（可自动播放，可点击的选项卡）

直接上代码，先是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 timerPlay;
11   var _this = $(this);
12
13   //reset 所有状态
14   _this.children("div").eq(0).children("div").eq(0).show();
15   _this.children("ul").eq(0).children("li").eq(0).addClass("current");
16
17   _this.children("ul").eq(0).children("li").click(function(){
18     //clear 自动播放timer
19     clearInterval(timerPlay);
20     //重新获取current index
21     current = $(this).index();
22     _this.children("ul").eq(0).children("li").eq(current).addClass("current").siblings("li").removeClass("current");
23     _this.children("div").eq(0).children("div").eq(current).show().siblings("div").hide();
24
25     //自动播放start
26     if(a) AutoPlay(t);
27   });
28
29   var tab = function(){
30     current++;
31     current%=totalLi;
32     autoTabs();
33   };
34
35   var autoTabs = function (){
36     $(".tabContent div").eq(current).show().siblings("div").hide();
37     _this.children("ul").children("li").eq(current).addClass("current").siblings("li").removeClass("current");
38   }
39   var AutoPlay = function (){
40     timerPlay = setInterval(function(){
41       tab(t);
42     },t);
43   }
44   if(a) AutoPlay(t);
45 }

第三部分，是直接使用

//直接调用,第二个参数 不写时 ，默认是自动播放的，只有写成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搞定收工