JS学习笔记 - 运动 - 淘宝轮播图

 

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('play');
    var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); // 注意 新写法
    var oUl=oDiv.getElementsByTagName('ul')[0];
    
    var now=0;
    
    for(var i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=function ()
        {
            now=this.index;  // ？？？ 用now的作用？
            
            tab();
        };
    }
     
    function tab()
    {
        for(var i=0;i<aBtn.length;i++)
        {
            aBtn[i].className='';
        }
        aBtn[now].className='active';
        startMove(oUl, {top: -150*now});
    }
    
    function next() // 这个函数的作用？ 自动轮播里调用 
    {
        now++;
        if(now==aBtn.length)  // 这里是不是不影响调用 后面的 tab(); 直到 now==aBtn.length 才生效？
        {
            now=0;
        }
        
        tab();
    }
    
    var timer=setInterval(next, 2000);
    
    oDiv.onmouseover=function ()
    {
        clearInterval(timer);
    };
    
    oDiv.onmouseout=function ()
    {
        timer=setInterval(next, 2000);
    };
};
</script>