js计时器案例--带滚动条的无缝滚动

一、效果图

二、设计思路

• 第一步：克隆两个ul，使用循环计时器进行无缝滚动
• 第二步：设置滚动的速度和时间
• 第三步：设置鼠标进去box停止滚动，离开继续滚动。
• 第四步：设置按钮拖动的函数，滚动条拖动，上面动画跟着移动，鼠标抬起，按照原先的速度进行滚动。

三、核心代码

<script>
    //接收计时器
    var time;
    //速度变量
    var speed=2;
    var timer=10;
    var Item,menuList,parItem,Box,Tab, Body, tarTab;
    //状态变量 防止添加二次动画
    var isadd = false;
    var offsetLeft;
    var selfOffset;
    window.onload=function(){
        Item=document.getElementsByClassName("item")[0];
        menuList=document.getElementsByClassName("menu-list")[0];
        parItem=document.getElementsByClassName("par-item")[0];
        Box=document.getElementsByClassName("box")[0];
        Tab=document.getElementsByClassName("tab")[0];
        tarTab = document.getElementsByClassName("tar-tab")[0];
        Body = document.body;
        //克隆menulist的所有元素
        Item.appendChild(menuList.cloneNode(true));
        //使用循环计时器写动画
        Animate();
        //鼠标进入box停止滚动，离开继续滚动
        Box.onmouseenter=function(){
            clearInterval(time);
            //给当前对象动态添加离开事件
            if(!isadd){
                this.addEventListener("mouseleave",leaveHandle);
                //按钮的父容器到屏幕的距离
                offsetLeft=tarTab.offsetLeft+Box.offsetLeft;
            }
        }
        //离开的函数
        function leaveHandle(){
            Animate();
        }
        //点击tab拖动
        Tab.onmousedown=function(e){
            //获取自身偏移
            selfOffset= e.offsetX;
            isadd=true;
            //点击的时候移除离开事件
            Box.removeEventListener("mouseleave",leaveHandle);
            //给body添加move事件
            Body.addEventListener("mousemove",Move);
            //处理鼠标点击拖动事件的默认行为
            e.preventDefault();
        }
        //body的move方法
        function Move(e){
            //按钮跟着移动
            var x= e.pageX;
            var left=x-offsetLeft-selfOffset;
            if(left<0){
                left=0;
            }
            else if(left>800){
                left=800;
            }
            Tab.style.left=left+"px";
            //让上面动画动起来
            parItem.scrollLeft=left/2*3;
        }
        //在body元素上抬起
        Body.onmouseup=function(){
            console.log("自动执行");
            isadd=false;
            //移除自身的move事件
            this.removeEventListener("mousemove", Move);
            //添加计时器
            Animate();
        }
        Body.onmouseleave=function(){
            //自动触发mouseup 自动触发mouseup事件 鼠标离开body区域时动画继续执行
            var events=document.createEvent("MouseEvents");
            events.initEvent("mouseup",false,true);
            this.dispatchEvent(events);
        }
    }

    function Animate(){
        if (time)
            clearInterval(time);
        time=setInterval(function(){
            var scrollLeft=parItem.scrollLeft;
            scrollLeft+=speed;
            if(scrollLeft>=parItem.scrollWidth/2){
                scrollLeft=0;
            }
            parItem.scrollLeft=scrollLeft;
            Tab.style.left = scrollLeft / 3 * 2 + "px";
        },timer);
    }
</script>