效果简介

跟普通的左右切换轮播图类似，但是它看起来是首尾相连的。

注意：要想学习这种轮播图，首先要学会实现基本左右切换轮播图！

代码

//获取所有图片中的第一张图片，目的是为了修改marginLeft属性来实现轮播效果
var firstimg = document.querySelectorAll(".bottom-banner .bottom-banner-inner img")[0];
var bbindex = 0;//必须从零开始，因为需要进行取余计算
var bbindexmax = 3;//不包含进行适配的最后一张
//（最后一张图实际上与第一张相同，就是为了实现循环的效果而添加的）

var st,stcb;//用于清除setTImeout的而保存的数字,setTImeoutChangeBanner
var changeTime = 500;//切换图片的用时（也就是transition设置的时间）
var intervalTime = 2000;//切换间隔时间，

//isNext表示切换到下一张还是上一张
//这个轮播图暂时不支持切换到指定的张数，因为我们的目的是实现循环切换
//如果同时切换多张，可能会导致问题
function changeBanner(isNext){
    clearTimeout(stcb);
    clearTimeout(st);
    stcb = setTimeout(function(){changeBanner(true)},intervalTime);
    if(isNext){
        bbindex++;
    }else{
        bbindex--;
    }
    if(bbindex < 0){
          //此处容易出错，为什么要+1，因为下面的循环是以bbindexmax+1为核心
          //如果此处不加1，会打乱其循环（导致切换的张的序号错乱）
        bbindex += bbindexmax +1;
    }
        //+1是因为这样才可以得出与bbindexmax相同张数的数字循环，即（0~bbindexmax）
    bbindex = bbindex % (bbindexmax+1);

    //下一张要切第一张时
    if(bbindex == 0 && isNext){
        bbindex = bbindexmax+1;
        firstimg.style.transition = "all 0." +changeTime+ "s";
        firstimg.style.marginLeft = -1200*bbindex + 'px';
        bbindex = 0;
        return;
    }
    //下一张要切第二张时
    if(bbindex == 1 && isNext){
        firstimg.style.transition = "none";
        firstimg.style.marginLeft = '-0px';
    }
    //上一张要切最后一张时
    if(bbindex == bbindexmax && !isNext){
        firstimg.style.transition = "none";
        firstimg.style.marginLeft = -1200*(bbindexmax+1) + 'px';
    }
    //为什么一定要延迟执行呢，因为设置的时间太短也会出现某些问题（可以自行去掉setTimeout函数尝试）
    //猜测问题的原因：是因为重绘出现的问题，时间太短，导致重绘未进行完就修改了属性
    setTimeout(function(){
        firstimg.style.transition =  "all 0." +changeTime+ "s";
        firstimg.style.marginLeft = -1200*bbindex + 'px';
    },10);
}
stcb = setTimeout(function(){changeBanner(true)},intervalTime);

首先来讲一下我的思路：
我们要想无缝切换图片，必须要在所有图片的最后添加一张第一张图片，因为要实现从最后一张切换到第一张时有过渡效果；
之后我们要让你处在第一张时，向前向后切换都要进行隐式切换。

何为隐式转换？隐式转换就是在你处于第一张图片时，实际上可能处于最后一张（注意，最后一张图片与第一张相同）或者真正的第一张。当进行前后轮播时，我们需要对切换方向进行判断。如果从第一张切换至第二张图，则我们需要从真正的第一张切换过去，此时我们需要将其transition属性设为none，然后切换至第一张图片。因为没有过渡，所以我们什么效果也看不到（两张相同图片之间的切换还没加过渡肯定啥也看不出来的呀），之后再将transition属性设置为正常的过渡，然后再更改marginLeft的数值进行切换，就能实现这种效果了。