上次的tab切换的代码里面有很多重复的代码，需要做做优化，把重复的代码用函数封装起来调用。
优化前：
1 <script>
2 //获取id封装成一个函数$()方便调用
3 function $(id){
4 //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
5 return typeof id==="string"?document.getElementById(id):id;
6 }
7 function tab(){
8 //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
9 var index=0,timer=null,timer2=null;
10 var titles=$('notice-tit').getElementsByTagName('li');
11 var divs=$('notice-con').getElementsByTagName('div');
12 for(var j=0;j<titles.length;j++){
13 //给每个li设置ID
14 titles[j].id=j;
15 //给每个li绑定悬浮事件
16 titles[j].onmouseover=function(){
17 //悬浮时首先清除延时定时器
18 clearInterval(timer);
19 //清除轮播定时器
20 clearTimeout(timer2);
21 //初始化两个定时器
22 timer2=null;
23 timer=null;
24 //this的一个引用，因为在setTimeout中this指向window对象
25 var that=this;
26 //创建一个延时定时器
27 timer2=setTimeout(function(){
28 for(var i=0;i<titles.length;i++){
29 titles[i].className="";
30 divs[i].style.display="none";
31 }
32 titles[that.id].className="select";
33 divs[that.id].style.display="block";
34 //鼠标悬浮时改变index的值为当前的id
35 index=that.id;
36 },500);
37 }
38 //给每个Li绑定鼠标离开时的事件
39 titles[j].onmouseout=function(){
40 //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
41 //所以鼠标离开后会自动播放下一个tab
42 timer=setInterval(function(){
43 index++;
44 if(index>=titles.length){
45 index=0;
46 }
47 for(var i=0;i<titles.length;i++){
48 titles[i].className="";
49 divs[i].style.display="none";
50 }
51 titles[index].className="select";
52 divs[index].style.display="block";
53 },2000);
54 }
55 }
56 //创建之前看是否存在轮播定时器，有就清除掉
57 if(timer){
58 clearInterval(timer);
59 timer=null;
60 }
61 //创建一个轮播定时器
62 timer=setInterval(function(){
63 index++;
64 if(index>=titles.length){
65 index=0;
66 }
67 for(var i=0;i<titles.length;i++){
68 titles[i].className="";
69 divs[i].style.display="none";
70 }
71 titles[index].className="select";
72 divs[index].style.display="block";
73 },2000);
74 }
75 tab();
76 </script>优化后：
1 <script>
2 //获取id封装成一个函数$()方便调用
3 function $(id){
4 //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
5 return typeof id==="string"?document.getElementById(id):id;
6 }
7 function tab(){
8 //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
9 var index=0,timer=null,timer2=null;
10 var titles=$('notice-tit').getElementsByTagName('li');
11 var divs=$('notice-con').getElementsByTagName('div');
12 for(var j=0;j<titles.length;j++){
13 //给每个li设置ID
14 titles[j].id=j;
15 //给每个li绑定悬浮事件
16 titles[j].onmouseover=function(){
17 //悬浮时首先清除延时定时器
18 clearInterval(timer);
19 //清除轮播定时器
20 clearTimeout(timer2);
21 //初始化两个定时器
22 timer2=null;
23 timer=null;
24 //this的一个引用，因为在setTimeout中this指向window对象
25 var that=this;
26 //创建一个延时定时器
27 timer2=setTimeout(function(){
28 changeOption(that.id);
29 //鼠标悬浮时改变index的值为当前的id
30 index=that.id;
31 },500);
32 }
33 //给每个Li绑定鼠标离开时的事件
34 titles[j].onmouseout=function(){
35 //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
36 //所以鼠标离开后会自动播放下一个tab
37 timer=setInterval(autoPlay,2000);
38 }
39 }
40 //创建之前看是否存在轮播定时器，有就清除掉
41 if(timer){
42 clearInterval(timer);
43 timer=null;
44 }
45 //创建一个轮播定时器
46 timer=setInterval(autoPlay,2000);
47 function autoPlay(){
48 index++;
49 if(index>=titles.length){
50 index=0;
51 }
52 changeOption(index);
53 }
54 function changeOption(curindex){
55 for(var i=0;i<titles.length;i++){
56 titles[i].className="";
57 divs[i].style.display="none";
58 }
59 titles[curindex].className="select";
60 divs[curindex].style.display="block";
61 }
62 }
63
64 tab();代码中三处重复的for循环清除 className display的属性，和下面给当前索引添加属性，所以需要把他们封装成函数，但是三处也不是全部一样，索引的值不同，可以给封装的函数changeOption()传入参数来解决.
然后发现自动轮播有两处是一样的，封装成函数autoPlay(),来调用它。
要记得，只要出现了重复都可以用函数来封装调用。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
