tab切换代码优化

上次的tab切换的代码里面有很多重复的代码，需要做做优化，把重复的代码用函数封装起来调用。

优化前：

 <script>
     //获取id封装成一个函数$()方便调用
 function $(id){
         //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
             return typeof id==="string"?document.getElementById(id):id;
         }
         function tab(){
         //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
         var index=0,timer=null,timer2=null;
         var titles=$('notice-tit').getElementsByTagName('li');
         var divs=$('notice-con').getElementsByTagName('div');
         for(var j=0;j<titles.length;j++){
             //给每个li设置ID
             titles[j].id=j;
             //给每个li绑定悬浮事件
             titles[j].onmouseover=function(){
             //悬浮时首先清除延时定时器
                 clearInterval(timer);
             //清除轮播定时器
                 clearTimeout(timer2);
             //初始化两个定时器
                 timer2=null;
                 timer=null;
             //this的一个引用，因为在setTimeout中this指向window对象
                 var that=this;
             //创建一个延时定时器
                 timer2=setTimeout(function(){
                     for(var i=0;i<titles.length;i++){
                 titles[i].className="";
                 divs[i].style.display="none";
             }
             titles[that.id].className="select";
             divs[that.id].style.display="block";
             //鼠标悬浮时改变index的值为当前的id
             index=that.id;
                 },500);
             }
             //给每个Li绑定鼠标离开时的事件
             titles[j].onmouseout=function(){
             //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
             //所以鼠标离开后会自动播放下一个tab
             timer=setInterval(function(){
                 index++;
             if(index>=titles.length){
                 index=0;
             }
             for(var i=0;i<titles.length;i++){
                 titles[i].className="";
                 divs[i].style.display="none";
             }
             titles[index].className="select";
             divs[index].style.display="block";
             },2000);
             }
         }
         //创建之前看是否存在轮播定时器，有就清除掉
         if(timer){
             clearInterval(timer);
             timer=null;
         }
         //创建一个轮播定时器
         timer=setInterval(function(){
             index++;
             if(index>=titles.length){
                 index=0;
             }
             for(var i=0;i<titles.length;i++){
                 titles[i].className="";
                 divs[i].style.display="none";
             }
             titles[index].className="select";
             divs[index].style.display="block";
         },2000);
 }
 tab();
 </script>

优化后：

     <script>
     //获取id封装成一个函数$()方便调用
         function $(id){
         //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
             return typeof id==="string"?document.getElementById(id):id;
         }
         function tab(){
         //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
         var index=0,timer=null,timer2=null;
         var titles=$('notice-tit').getElementsByTagName('li');
         var divs=$('notice-con').getElementsByTagName('div');
         for(var j=0;j<titles.length;j++){
             //给每个li设置ID
             titles[j].id=j;
             //给每个li绑定悬浮事件
             titles[j].onmouseover=function(){
             //悬浮时首先清除延时定时器
                 clearInterval(timer);
             //清除轮播定时器
                 clearTimeout(timer2);
             //初始化两个定时器
                 timer2=null;
                 timer=null;
             //this的一个引用，因为在setTimeout中this指向window对象
                 var that=this;
             //创建一个延时定时器
                 timer2=setTimeout(function(){
                 changeOption(that.id);
             //鼠标悬浮时改变index的值为当前的id
             index=that.id;
                 },500);
             }
             //给每个Li绑定鼠标离开时的事件
             titles[j].onmouseout=function(){
             //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
             //所以鼠标离开后会自动播放下一个tab
             timer=setInterval(autoPlay,2000);
             }
         }
         //创建之前看是否存在轮播定时器，有就清除掉
         if(timer){
             clearInterval(timer);
             timer=null;
         }
         //创建一个轮播定时器
         timer=setInterval(autoPlay,2000);
 function autoPlay(){
             index++;
             if(index>=titles.length){
                 index=0;
             }
             changeOption(index);
 }
 function changeOption(curindex){
     for(var i=0;i<titles.length;i++){
                 titles[i].className="";
                 divs[i].style.display="none";
             }
             titles[curindex].className="select";
             divs[curindex].style.display="block";
 }
 }

 tab();

代码中三处重复的for循环清除 className display的属性，和下面给当前索引添加属性，所以需要把他们封装成函数，但是三处也不是全部一样，索引的值不同，可以给封装的函数changeOption()传入参数来解决.

然后发现自动轮播有两处是一样的，封装成函数autoPlay(),来调用它。

要记得，只要出现了重复都可以用函数来封装调用。