js图片无缝滚动

爱被打了一巴掌 2022-03-25 08:57 389阅读 0赞

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

**主要原理：利用利用动态创建一个与当前相同的图片条，利用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>

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