逐帧轮播图效果实现

Posted 2021-01-11 zhangzhiyong

　　所谓逐帧轮播图就是一帧一帧的移动播放，并且实现无缝接连播放的效果。下面将介绍逐帧轮播图的实现思路。

　　该效果的重点是如何实现无缝连接，其实很简单，逐帧轮播图都是从右往左移动，那么只需将最后一幅轮播图片复制一份放在第一张的位置（比如有5张轮播图，那么位置排列为 5 1 2 3 4 5），这样当图片播放到第六张时，立马就跳转位置到第一张上，这样从视觉上就是无缝连接了。

　　所以，图片准备代码如下（html）：

 <section class="container" id="container">
        <div class="imgs" id="imgs">
            <img src="../img/5.jpeg" >
            <img src="../img/1.jpeg" >
            <img src="../img/2.jpeg" >
            <img src="../img/3.jpeg" >
            <img src="../img/4.jpeg" >
            <img src="../img/5.jpeg" >
        </div>
    </section>

　　在这里，我将准备的共6张图片放到一个div里面装起来，这样轮播的时候我就只需移动div的位置即可（要把div的position属性设置成absolute定位）。故div的初识位置要将第二张图片展示出来。

　　css代码如下：

<style>
        .container {
            width: 800px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .imgs {
            position: absolute;
            display: flex;
            left: -800px;
        }
    </style>

　　其中，我的图片宽度为800px，所以我将位置设置成-800px，这样最开始展示的图片就是编号为1的图片（第二张）。

　　js代码如下：

 <script>
        let imgs = document.getElementById(‘imgs‘);
        let img = document.getElementsByTagName(‘IMG‘);
        let stopTimer1;
        // 移动的回调函数
        let move1 = function () {
            imgs.style.left = imgs.offsetLeft - 2 + ‘px‘;
            // 当第5张播放到 5图片时，直接跳转到位于第一个的备份 5图片，这样就造成了一直无空隙播放的假象
            // 判断的值 -4000为 5图片前面 共计五张图片的宽的和，然后直接跳转到left为0.
            if (imgs.offsetLeft <= -img[0].offsetWidth * (img.length - 1)) {
                imgs.style.left = 0 + ‘px‘;
            }
            if (imgs.offsetLeft % img[0].offsetWidth == 0) {
                clearInterval(stopTimer1);
            }
        }
        // 移动函数
        let move = function () {
            stopTimer1 = setInterval(move1, 10);
        }
        // 每隔7秒调用1次，7秒等于 图片移动的4秒（800px，每10ms移动2px）+ 停顿的 3秒
        setInterval(function () {
            move();
        }, 7000);
    </script>