一个小的tab切换插件

 1

1//使用 

　　var t1=new Tab({
2       etype:'onmou',//默认点击触发，如果事件写错了，当作单击
3       autoplay:2000,//有时间值(按照事件自动播放)和false(不自动播放)
4       invoke:3,//默认是第一项。
5     });

 

 

//插件的基本结构
 2 ;(function(){
 3     function Tab(options){//options：配置参数
 4         this.tab=document.querySelector('.tab');
 5         this.tabBtn=document.querySelector('.tab_btn');
 6         this.btns=this.tabBtn.getElementsByTagName('li');
 7         this.divs=this.tab.querySelectorAll('.tab_item');
 8         this.num=0;
 9         this.timer=null;
10         this.options=options;
11         this.settings={//默认参数
12             etype:'onclick',//默认点击触发，如果事件写错了，当作单击
13             autoplay:3000,//有时间值(按照事件自动播放)和false(不自动播放)
14             invoke:1,//默认是第一项。
15             effect:'display'//display/opacity
16         }
17         this.init();
18     }
19     
20     Tab.prototype.init=function(){
21         var that=this;
22         extend(this.settings,this.options);
23         if(this.settings.etype=='onclick' || this.settings.etype!='onmouseover'){
24             this.tabSwitch('onclick');
25         }else if(this.settings.etype=='onmouseover'){
26             this.tabSwitch(this.settings.etype);
27         }
28         if(this.settings.autoplay){//如果配置参数传入一个时间，允许自动轮播，轮播的时间传过去
29             this.autoplay(this.settings.autoplay);
30         }
31         if(this.settings.invoke>1 && this.settings.invoke<=this.btns.length){
32             this.num=this.settings.invoke-1;
33             this.tabchange();
34         }
35         this.tab.onmouseover=function(){
36             clearInterval(that.timer);
37         }
38         this.tab.onmouseout=function(){
39             that.autoplay(that.settings.autoplay);
40         }
41     }
42     
43     Tab.prototype.tabSwitch=function(e){
44         var that=this;
45         for(var i=0;i<this.btns.length;i++){
46             this.btns[i].index=i;
47             this.btns[i][e]=function(){
48                 that.num=this.index;
49                 that.tabchange();
50             }
51         }
52     }
53     Tab.prototype.tabchange=function(){
54         for(var i=0;i<this.btns.length;i++){
55             this.btns[i].className='';
56             this.divs[i].className='hide';
57             if(this.settings.effect=='opacity'){    
58                 buffermove(this.divs[i],{opacity:0});
59                 this.divs[i].style.display='none';
60             }
61         }
62         this.btns[this.num].className='active';
63         if(this.settings.effect=='display' || this.settings.effect!='opacity'){
64             this.divs[this.num].className='show';
65         }else if(this.settings.effect=='opacity'){
66             this.divs[this.num].style.display='block';
67             buffermove(this.divs[this.num],{opacity:100});
68         }
69     }
70     Tab.prototype.autoplay=function(time){
71         var that=this;
72         this.timer=setInterval(function(){
73             that.num++;
74             if(that.num>=that.btns.length){
75                 that.num=0;
76             }
77             that.tabchange();
78         },time);
79     }
80     
81     function extend(obj1,obj2){
82         for(var i in obj2){
83             obj1[i]=obj2[i];
84         }
85         return obj1;
86     }
87     window.Tab=Tab; 
88 })();

 

转载于:https://www.cnblogs.com/aloehui/p/8074842.html