鼠标点击轮播图完成清除定时器操作后为什么这个轮播图不会重新开头移动

来源：6-2 无缝连续滚动特效

请你摘掉伪善的面具

2021-06-15 22:53:56

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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;
        }
    </style>
</head>
<body>
    <div id="box" class="box">
        <ul id='list'>
            <li><img src="/images/number/0.png" alt=""></li>
            <li><img src="/images/number/1.png" alt=""></li>
            <li><img src="/images/number/2.png" alt=""></li>
            <li><img src="/images/number/3.png" alt=""></li>
            <li><img src="/images/number/4.png" alt=""></li>
            <li><img src="/images/number/5.png" alt=""></li>
        </ul>
    </div>

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

        //复制多一遍li
        list.innerHTML+=list.innerHTML;

        //全局变量，表示list的left值
        var left=0;
        var timer;
        move();

        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>
</body>
</html>