原生JS实现无缝轮播图播放

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

在刚学习H5网页开发时常会遇到轮播图，在遇到的轮播图例子常常是当轮播到最后一张图片时就会倒退回第一张，给人一种不好的体验，因此就需要掌握当轮播到最后一张图片后直接就切换到第一张，实现无缝连接的能力。

思路

轮播图的基本思路是使用一个宽高限定的大盒子包裹一个图片展开展示的小盒子，然后再通过定时器控制小盒子向左/右移动一张图片宽度的距离。

而无缝轮播图的关键思路是在图片列表的最后再复制加上第一张图片的内容，当轮播图轮播到复制的图片时，立即切换到第一张图片，再移动到第二张图片，通过人眼的视差和时差实现无缝连接。

...
<script src="./js/animate.js"></script>
...
<div id="main">
    <div id="banner-box">
        <img class="banner" src="./image/banner1.jfif" alt="">
        <img class="banner" src="./image/banner2.jfif" alt="">
        <img class="banner" src="./image/banner3.jfif" alt="">
        <img class="banner" src="./image/banner4.jfif" alt="">
        <img class="banner" src="./image/banner1.jfif" alt="">
    </div>
    <div id="pun-list">
        <p class="active"></p>
        <p class=""></p>
        <p class=""></p>
        <p class=""></p>
    </div>
</div>

1、获取大盒子元素、图片列表长度以及指示点元素集合，设置一些变量。

    let bannerBox = document.getElementById('banner-box');
    let timer = null;
    let length = document.getElementsByClassName('banner').length;
    let punList = document.getElementsByTagName('p');
    let width = 800; // 图片的宽度，暂时写死
    let imgIndex = 0;  // 图片的索引值
    timer = setInterval(fn, 3000);  // 这里设置三秒钟换一次图片

2、定时器函数：当移动到最后一张（就是复制图片的内容）时，imgIndex为5，此时设置imgIndex=0，并切换到第一张图片-width * imgIndex + 'px'，然后再设置imgIndex++，那么接下来就会直接移动进入第二张图片。

function fn() {
    imgIndex++;
    if(imgIndex > length - 1){
        imgIndex = 0;
        bannerBox.style.left = -width * imgIndex + 'px';
        imgIndex++; // imgIndex++,是为了让接下来移动的那张图直接进入第二张
    }
    let target = -width * imgIndex;
    animate(bannerBox, target, 8, 10);  //自定义的过渡动画函数（仅包括移动动画）
}

3、修改轮播图指示点，每次切换时都清空所有的active类名，再给对应btnIndex的指示点添加active类名。

function fn() {
    ...
    btnIndex++;
    ...
    if(btnIndex >= length - 1){
        btnIndex = 0;
    }
    for(let i = 0;i < punList.length; i++){
        punList[i].className = '';
    }
    punList[btnIndex].className = 'active';
}

注意：无缝轮播图的移动过渡效果，不能给banner-box设置transition，如果设置了的话，当最后一张图片切换到第一张图片时也会出现transition设置的过渡效果，无法从视差上实现无缝，因此需要自己书写过渡效果，也就是上面使用到animate函数。后面我也会对引入的animate.js写一篇文章阐述。