js图片无缝滚动

虽然是一个简单的案例，但思想确实很巧妙，且一通百通！

主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动用利用视觉暂留效应，实现图条的无缝循环；

<!-- 像电子屏一样的循环滚动 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片无缝滚动</title>
    <style>
        body {
            margin: 0%;
            padding: 0%;
        }

        .d1,
        .d3 {
            width: 3200px;
            height: 200px;
            float: left;
        }

        .d1>img,
        .d3>img {
            width: 400px;
            height: 200px;
            float: left;
        }

        .d2 {
            width: 1500px;
            height: 200px;
            overflow: hidden;
            /* margin: 0% auto; */
        }

        .d4 {
            width: 6400px;
            height: 200px;

        }
    </style>
</head>

<body>
    <div class="d2">
        <div class="d4">
            <div class="d1">
                <img src="./img/222.jpg" alt="" class="d1_img">
                <img src="./img/333.jpg" alt="" class="d1_img">
                <img src="./img/111.jpg" alt="" class="d1_img">
                <img src="./img/444.jpg" alt="" class="d1_img">
                <img src="./img/555.jpg" alt="" class="d1_img">
                <img src="./img/666.jpg" alt="" class="d1_img">
                <img src="./img/777.jpg" alt="" class="d1_img">
                <img src="./img/888.jpg" alt="" class="d1_img">
            </div>
            <div class="d3"></div>
        </div>

    </div>
    <script>
        // 这里，将用图片拼成的长图叫做图条，便于理解
        var d1 = document.getElementsByClassName('d1')[0];
        var d2 = document.getElementsByClassName('d2')[0];
        var d3 = document.getElementsByClassName('d3')[0];
        // 获取对应的 div  其中 d1  d2  d3  d4  为我写代码时的思路先后顺序
        var time_totle; //定义一个全局变量，方便调用
        d3.innerHTML = d1.innerHTML;
        showimg(); //总函数  也就是对time_tolte的封装 可以方便调用
        function showimg() {
            time_totle = setInterval(function () {
                // 利用循环计时器来执行图片滚动函数
                if (d2.scrollLeft == 3200) {
                    // 由于第一张图条宽为3200，也就是滚动条来到3200时，切换为之前开始的值
                    // 也就是说，在滚动条为3200时，已经开始显示动态创建的和之前一样的图条，
                    // 但瞬间切换到了相同位置的第一张图，实现了无缝滚动
                    d2.scrollLeft = 0;
                }
                var scroll = d2.scrollLeft;
                scroll += 2;
                // 每1ms 移动2个单位 也就是控制速度
                d2.scrollLeft = scroll;
            }, 1)
        }
        var d1_img = document.getElementsByClassName('d1_img')[0];
        // console.log(d1_img);
        d1.onmouseenter = function () {
            // 当鼠标滑入滚动图时，暂停滚动
            clearInterval(time_totle);
        }
        d1.onmouseleave = function () {
            showimg();
            // 鼠标离开时，重新调用总函数，计时器开始工作
        }
    </script>
</body>

</html>

多练习，就能从中找到自己的方法！

猜你喜欢