原生JS实现无缝轮播

什么叫无缝轮播

无缝轮播是网页中比较常见的一种轮播方式，很多网站首页都应用了无缝轮播，这种效果使页面看起来更顺滑。

先来看一下我实现的效果图：

无缝轮播的实现

下面用示意图清楚的展现了无缝轮播的原理：

一共有3张图片轮播，但是为什么有5张图片呢？这是因为要想实现无缝轮播的效果，就要用“障眼法”。

每当图片滚动到最后一张或者第一张时，都会自动回到第一张或最后一张，加入这两张图片有一个过渡的效果。

原理分析

好了，在介绍了无缝轮播之后，小伙伴们是不是跃跃欲试了呢，别着急，在正式写代码之前让我们先把逻辑理清楚。

假设当前正在播放的图片是1，令currentIndex = 1，当前left = 实际运动过程中距离左边的长度，目标left = 要切换的图片距离左边的长度，且这两个均为负数。

如果当前图片移动方向是向左，当目标left < 当前left时，假设是从0移动到2：

//目标left，index是要切换的图片的索引，imgWidth是图片宽度
var newLeft = index * imgWidth;
//计算需要移动的总距离
var distance = newLeft - marginLeft;

当目标left > 当前left时，假设是从2移动到0：

//3张图片总宽
var totalWidth = 3 * igmWidth;
distance = -(totalWidth - Math.abs(newLeft - marginLeft));

接下来分析图片向右移动的情况

当目标left > 当前left时，这时候移动的就是正数了

distance = newLeft - marginLeft;

当目标left < 当前left

distance = totalWidth - Math.abs(newLeft - marginLeft);

设置动画效果

好的，既然逻辑清楚了，接下来就是愉快的写代码环节。

/**
 * 切换到某一个图片的索引
 * @param {*} index 要切换到目标的图片的索引
 * @param {*} direction 图片移动的方向 "left" "right"
 */
function switchTo(index, direction) {
   
    if (index == config.currentIndex) {
   
        return;
    }
    if (!direction) {
   
        direction = "left";
    }
    //最终的marginLeft
    var newLeft = (-index - 1) * config.imgWidth;
    animateSwitch();
    //重新设置当前索引
    config.currentIndex = index;
    //设置小圆点的选中状态
    setDotsActiveStatus();

    /**
     * 逐步改变marginLeft
     */
    function animateSwitch() {
   
        //先停止之前的动画
        stopAnimate();
        //1、计算运动的次数
        var number = Math.ceil(config.timer.total / config.timer.duration);
        //当前的运动次数
        var currentNum = 0;

        //2、计算需要移动总距离
        var distance;
        //获取当前的left值
        var marginLeft = parseFloat(getComputedStyle(config.doms.divImgs).marginLeft);
        var totalWidth = config.imgsNum * config.imgWidth;
        if (direction == "left") {
   
            if (newLeft < marginLeft) {
   
                distance = newLeft - marginLeft;
            } else {
   
                distance = -(totalWidth - Math.abs(newLeft - marginLeft));
            }
        } else {
   
            if (newLeft > marginLeft) {
   
                distance = newLeft -