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

直接上代码，先是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搞定收工

转载于:https://www.cnblogs.com/leilin007/p/4484823.html