tab切换代码优化
上次的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(),来调用它。
要记得，只要出现了重复都可以用函数来封装调用。
