各种选项卡

标签：

1.清空整个:

window.onload=function(){
   var aA=document.getElementsByTagName(‘a‘);//控制左右移动的按钮
   var aInput=document.getElementsByTagName(‘input‘);//上面运动的盒子
   var aDiv=document.getElementsByTagName(‘div‘);//下面运动的盒子
   var pre=0; //计数的人
   for(var i=0;i<aInput.length;i++){  //鼠标移入事件
         aInput[i].index=i; //自定义属性,为了获取this的下标
         aInput[i].onmouseover=function(){
         pre=this.index;
         tab();
     }
     }
    function tab(){ //先清空整个，再让当前显示
         for(var i=0;i<aInput.length;i++){
              aInput[i].className=‘‘;
              aDiv[i].className=‘‘;
             }
           aInput[pre].className=‘active‘;
          aDiv[pre].className=‘on‘;
     }

          aA[0].onclick=function(){  //左边的按钮点击事件
              pre--;
              if(pre==-1){pre=aInput.length-1;}
                  tab();
              }
         aA[1].onclick=function(){  //右边的按钮点击事件
               pre++;
               if(pre==aInput.length){pre=0;}
               tab();
            }

　　　}

2.清空前一个:　　

window.onload=function(){
　　var aA=document.getElementsByTagName(‘a‘);
　　var aInput=document.getElementsByTagName(‘input‘);
　　var aDiv=document.getElementsByTagName(‘div‘);
　　var pre=0;
　　for(var i=0;i<aInput.length;i++){
　　　　aInput[i].index=i;
　　　　aInput[i].onmouseover=function(){
　　　　　　for(var i=0;i<aInput.length;i++){
　　　　　　　　　　aInput[i].className=‘‘;
　　　　　　　　　　aDiv[i].className=‘‘;
　　　　　　　　}
　　　　　　this.className=‘active‘;
　　　　　　aDiv[this.index].className=‘on‘;
　　　　　　pre=this.index;//用于后面的点击按钮事件
　　　　　　}
　　　　}
　　　　function tab1(){
　　　　　　aInput[pre].className=‘‘;
　　　　　　aDiv[pre].className=‘‘;
　　　　　　pre++;
　　　　　　if(pre==aInput.length){pre=0;}
　　　　　　aInput[pre].className=‘active‘;
　　　　　　aDiv[pre].className=‘on‘;
　　　　　　}
　　　　function tab0(){
　　　　　　aInput[pre].className=‘‘;
　　　　　　aDiv[pre].className=‘‘;
　　　　　　pre--;
　　　　　　if(pre==-1){pre=aInput.length-1;}
　　　　　　aInput[pre].className=‘active‘;
　　　　　　aDiv[pre].className=‘on‘;
　　　　　　}
　　　　　　aA[1].onclick=tab1;
　　　　　　aA[0].onclick=tab0;
}

3.自动轮播：

　　window.onload=function(){
                var aA=document.getElementsByTagName(‘a‘);
                var aInput=document.getElementsByTagName(‘input‘);
                var oDiv=document.getElementById("wrap")
                var aDiv=oDiv.getElementsByTagName(‘div‘);
                var pre=0;
                var timer=null;
                for(var i=0;i<aInput.length;i++){
                    aInput[i].index=i;
                    aInput[i].onmouseover=function(){
                        for(var i=0;i<aInput.length;i++){
                            aInput[i].className=‘‘;
                            aDiv[i].className=‘‘;
                        }
                        this.className=‘active‘;
                        aDiv[this.index].className=‘on‘;
                        pre=this.index;
                    }
                }
                function tab1(){
                    aInput[pre].className=‘‘;
                    aDiv[pre].className=‘‘;
                    pre++;
                    if(pre==aInput.length){pre=0;}
                        aInput[pre].className=‘active‘;
                    aDiv[pre].className=‘on‘;
                }
                function tab0(){
                    aInput[pre].className=‘‘;
                    aDiv[pre].className=‘‘;
                    pre--;
                    if(pre==-1){pre=aInput.length-1;}
                        aInput[pre].className=‘active‘;
                    aDiv[pre].className=‘on‘;
                }
                    aA[1].onclick=tab1;
                    aA[0].onclick=tab0;
                    timer=setInterval(tab1,300);//向右自动轮播
                    oDiv.onmouseover=function(){clearInterval(timer);}
                    oDiv.onmouseout=function(){timer=setInterval(tab1,300);}
            }

4.用户体验好的选项卡：

　　　　window.onload=function(){
                var aInput=document.getElementsByTagName(‘input‘);
                var aLi=document.getElementsByTagName(‘li‘);
                var timer=null;
                for(var i=0;i<aInput.length;i++){
                    aInput[i].index=i;
                    aInput[i].onmouseover=function(){       //移入300ms后切换；快速移入打开定时器计时，快速移出就会关闭定时器，不发生切换；
                        var that=this;       //把this用一个变量存放，用于下面的函数使用；
                        function tick(){
                                for(var i=0;i<aInput.length;i++){
                                aInput[i].className=‘‘;
                                aLi[i].className=‘‘;
                                 }
                                that.className=‘active‘;
                                aLi[that.index].className=‘on‘;
                            }//此时的this是input元素，setTimeout里的this是window
                            timer=setTimeout(tick,300); //鼠标持续1000ms才执行tick函数  
                            
                        }
                    aInput[i].onmouseout=function(){            //鼠标移出立马关掉定时器，不发生切换，不会来回闪屏
                            clearTimeout(timer);
                        }
                
                }
            }

各种选项卡

标签：

原文地址：http://www.cnblogs.com/yang0902/p/5699483.html