JavaScript 无缝连接滚动特效

先上效果图：

css：

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1000px;
            height: 130px;
            border: 1px solid #000;
            margin: 50px auto;

            /* 溢出盒子的部分隐藏 */
            overflow: hidden; 
        }
        .box ul{
            list-style: none;
            width: 5000px;
            position: relative;
        }
        .box ul li{
            float: left;
            margin-right: 10px;
        }
        img{
            height: 130px;width: 200px;
        }
    </style>

 html：

 <div id="box" class="box">
        <ul id="list">
            <li><img src="images/1.jpeg" alt=""></li>
            <li><img src="images/1.jpeg" alt=""></li>
            <li><img src="images/1.jpeg" alt=""></li>
            <li><img src="images/1.jpeg" alt=""></li>
            <li><img src="images/1.jpeg" alt=""></li>
            <li><img src="images/1.jpeg" alt=""></li>
        </ul>
 </div>

js：

<script>
        var box = document.getElementById('box');
        var list = document.getElementById('list');

        //复制
        list.innerHTML += list.innerHTML;

        //全局变量，表示当前list的left值
        var left = 0;
        move();
        //动画封装成函数
        var timer;
        function move(){
            //设置定时器，先关闭一下，防止动画积累。
            clearInterval(timer);
            //定时器
            timer = setInterval(function(){
                left -= 4;
                if(left <= -1260){
                    left = 0;
                }
                list.style.left = left + 'px';
             },20)
        }
        //鼠标进入 暂停滚动
        box.onmouseenter = function(){
            clearInterval(timer);
        }
        //鼠标移出 开始滚动
        box.onmouseleave = function(){
            move();
        }
</script>