js计时器案例--无缝滚动动画

一、效果图

二、实现思路

• 第一步：通过克隆节点复制两个ul，通过计时器让他实现无缝滚动。
• 第二步：设置滚动的速度以及时间。
• 第三步：实现鼠标进入滚动停止，离开继续进行无缝滚动。

三、主要代码

<script>
    var box=document.getElementsByClassName("box")[0];
    var nav=document.getElementsByClassName("nav")[0];
    var list=document.getElementsByClassName("list")[0];
    var speedIpt=document.getElementsByClassName("speed")[0];
    var setSpeed=document.getElementsByClassName("setSpeed")[0];
    var timerIpt=document.getElementsByClassName("timerIpt")[0];
    var setTimer=document.getElementsByClassName("setTimer")[0];
    var maxLeft=nav.clientWidth;
    var speed=5;
    var timer=1;
    var time;
    //使用计时器写无缝滚动
    window.onload=function(){
        //元素克隆
        list.appendChild(nav.cloneNode(true));
        //直接执行动画
        loop();
        //设置速度
        setSpeed.onclick=function(){
            var val=speedIpt.value;
            if(val.length>0&&!isNaN(val.value)){
                speed=parseInt(val);
            }
            speedIpt.value="";
        }
        //设置时间
        setTimer.onclick=function(){
            var val=timerIpt.value;
            if(val.length>0&&!isNaN(val.value)){
                timer=parseInt(val);
            }
            timerIpt.value="";
        }
        //设置鼠标悬停滚动停止
        box.onmouseenter=function(){
            clearTimeout(time);
        }
        box.onmouseleave=function(){
            loop();
        }
    }
    function loop(){
        //获取scrollLeft
        var scleft=box.scrollLeft;
        scleft+=speed;
        if(scleft>=maxLeft){
            scleft=0;
        }
        box.scrollLeft=scleft;
        time=setTimeout(loop,timer);
    } 
</script>