麻烦老师，看下实现是否正确，是否还有待优化

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

张小阳_

2022-07-12 20:20:53

<!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>无缝滚动特效</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        img {
            width: 200px;
        }

        #box {
            width: 1000px;
            height: 146px;
            border: 2px solid #333;
            margin: 20px auto;
            overflow: hidden;
        }

        #box ul {
            width: 2500px;
            position: relative;
            left: 0;
        }

        #box ul li {
            float: left;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul id=list>
            <li><img src="./images/logo_img_0.png" alt=""></li>
            <li><img src="./images/logo_img_1.png" alt=""></li>
            <li><img src="./images/logo_img_2.png" alt=""></li>
            <li><img src="./images/logo_img_3.png" alt=""></li>
            <li><img src="./images/logo_img_4.png" alt=""></li>
            <li><img src="./images/logo_img_5.png" alt=""></li>
        </ul>
    </div>

    <script>
        // 先复制一份需要移动的元素
        var list = document.getElementById('list');
        list.innerHTML += list.innerHTML;
        move(); //一上来就要开始滚动
        var leftMove = 0;
        var timer;
        function move() {
            clearInterval(timer);   //防止定时器的叠加
            timer = setInterval(function () {
                leftMove -= 4;
                list.style.left = leftMove + 'px';
                if (leftMove <= -1200) {
                    leftMove = 0;
                }
            }, 20);
        };
        // 鼠标移入停止
        var box = document.getElementById('box');
        box.onmouseenter = function () {
            clearInterval(timer);
        };
        // 输入移出继续
        box.onmouseleave = function () {
            move();
        };
    </script>
</body>

</html>

写回答

1回答