实例——自动选项卡

实现选项卡的核心是：先清空所有的，在把当前的设置

自动播放是需要用到定时器

实现下一个 用n++;//变量

css代码

.box { position:relative; width:400px; border:1px solid red; margin:50px auto; text-align:center; }
.box a { position:absolute; top:0; width:30px; height:30px; text-align:center; line-height:30px; text-decoration:none; }
#next { right:0; }
#prev { left:0; }

.box input { width:80px; height:30px; }
input.active { background:yellow; }
.box div { display:none; height:120px; background:#ccc; color:#fff; font-size:50px; line-height:120px; text-align:center; font-weight:bold; }
div.active { display:block; }

 

html代码

<div class="box" id="box">
        <a href="javascript:;" id="prev">←</a>
        <a href="javascript:;" id="next">→</a>
        <input type="button" value="00" class="active" />
        <input type="button" value="11" />
        <input type="button" value="22" />
    
        <div class="active">00</div>
        <div>11</div>
        <div>22</div>
    </div>

 

js代码

window.onload=function (){
    var oBox=document.getElementById('box');
    var aBtn=oBox.getElementsByTagName('input');
    var aDiv=oBox.getElementsByTagName('div');
    var now=0; // 当前
    
    // 选项卡
    for (var i=0; i<aBtn.length; i++)
    {
        aBtn[i].index=i;
        
        aBtn[i].onclick=function (){
            now=this.index;
            
            tab();
        };
    }
    
    // 上一个
    var oPrev=document.getElementById('prev');
    oPrev.onclick=function (){
        now--;
        if (now < 0)
        {
            now=aBtn.length-1;
        }
        
        tab();
    };
    
    // 下一个
    var oNext=document.getElementById('next');
    oNext.onclick=next;
    
    // 自动播放
    var timer=setInterval(next, 1000);
    
    oBox.onmouseover=function (){
        clearInterval(timer);
    };
    
    oBox.onmouseout=function (){
        timer=setInterval(next, 1000);
    };
    
    function next()
    {
        now++;
        
        if (now == aBtn.length)
        {
            now=0;
        }
        
        tab();
    }
    function tab()
    {
        for (var i=0; i<aBtn.length; i++)
        {
            aBtn[i].className='';
            aDiv[i].className='';
        }
        
        aBtn[now].className='active';
        aDiv[now].className='active';
    }
};