JavaScript 文字无缝滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 50px;
            border: 1px solid #333;
            overflow: hidden;
            margin: 50px auto;
        }
        /* 装文字的盒子的长度要是文字长度的两倍 */
        .box1 {
            width: 1200px;
        }

        .text {
            width: 600px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class="text">
                莱万多夫斯基 阿方索戴维斯 基米希 托马斯穆勒 格雷茨卡
            </div>
            <div class="text">
                莱万多夫斯基 阿方索戴维斯 基米希 托马斯穆勒 格雷茨卡
            </div>
        </div>

    </div>


    <script>
        window.addEventListener('load', function () {
            var box = document.querySelector('.box');
            var box1 = document.querySelector('.box1');
            var text = document.querySelector('.text');

            var moveLeft = 0;
            var timer1 = setInterval(function () {
                moveLeft--;
                //利用margin-left 让文字移动
                text.style.marginLeft = moveLeft + 'px';
                //因为一段文字的长度是600px
                if (moveLeft < -600) {
                    moveLeft = 0;
                }
            }, 10);

        })





    </script>
</body>

</html>

图片的无缝滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 8 张图片 长度为2400px */
        ul {
            float: left;
            width: 2400px;
            list-style: none;
        }

        /* 图片设置宽度为300px */
        li {
            float: left;
            width: 300px;
        }

        li img {
            width: 100%;
        }

        .box1 {
            margin: 10px auto;
            border: 1px solid #000;
            width: 1200px;
            height: 200px;
            overflow: hidden;
        }

        .box2 {
            position: relative;
            margin: 0 auto;
            width: 2400px;
            height: 200px
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <ul>
                <li><img src="./images/0.jpg" alt=""></li>
                <li><img src="./images/1.jpg" alt=""></li>
                <li><img src="./images/2.jpg" alt=""></li>
                <li><img src="./images/3.jpg" alt=""></li>
                <li><img src="./images/0.jpg" alt=""></li>
                <li><img src="./images/1.jpg" alt=""></li>
                <li><img src="./images/2.jpg" alt=""></li>
                <li><img src="./images/3.jpg" alt=""></li>
            </ul>
        </div>
    </div>

    <script>
        window.addEventListener('load', function () {
            var ul = document.querySelectorAll('ul');
            var box2 = document.querySelector('.box2')
            var moveLeft = 0;

            var move = function () {
                moveLeft--;
                //box2 带着两组图片一起移动
                box2.style.marginLeft = moveLeft + 'px';
                if (moveLeft < -1200) {
                    moveLeft = 0;
                }
            }
            var timer1 = setInterval(move, 10);

            //鼠标进入和出来会中断和重新开始图片的移动
            box2.addEventListener("mouseenter", function () {
                clearInterval(timer1);
            })
            box2.addEventListener("mouseleave", function () {
                timer1 = setInterval(move, 10);
            })

        })


    </script>
</body>

</html>

这两个无缝滚动原理一样，但是懒狗记不住，传上来就等于记住了。