摘要：無(wú)限循環(huán)下去大量重復(fù)的代碼就需要尋找合適的的代替，一直播下去我們可以使用這里是自然增長(zhǎng)，讓它一直玄幻下去取值應(yīng)該是如果大于節(jié)點(diǎn)，就取余如果取余為，則讓等于這樣就是實(shí)現(xiàn)了無(wú)縫輪播，上面用到了的插值法。

剛剛的輪播用具體思維做，因?yàn)椴恢浪心膸追N狀態(tài)，就一步步來(lái)做，等效果做出來(lái)后，哪幾種狀態(tài)，一目了然。下面就用抽象思維做一遍.

初始化CSS樣式

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.window{
    width:400px;
    height:300px;
    overflow:hidden;
    margin:20px auto
}
.images{
    position:relative;
}
.images > img{
    position:absolute;
    transition:all 0.5s;
    width:100%;
    top:0;
}

先來(lái)看下這個(gè)輪播有那幾種狀態(tài)

圖片出現(xiàn)在視窗狀態(tài)，我用 current 表示

圖片離開(kāi)視窗狀態(tài)，我用 leave 表示

圖片準(zhǔn)備進(jìn)入視窗狀態(tài)，我用 enter 表示

現(xiàn)在就是要寫(xiě)三個(gè)類(lèi)，通過(guò)JS 激活class 來(lái)實(shí)現(xiàn)輪播

.images > img.current{
    transform:translateX(0);
    z-index:1;
}
.images > img.leave{
    transform:translateX(-100%);
    z-index:1;
}
.images > img.enter{
    transform:translateX(100%);
}

梳理下每張圖片的狀態(tài)

初始化每張圖片的位置，圖片1 出現(xiàn)在當(dāng)前視窗current，圖片2、圖片3 應(yīng)該在視窗右邊待命，隨時(shí)準(zhǔn)備進(jìn)入視窗enter

當(dāng)圖片1 離開(kāi)視窗時(shí)leave，圖片2 進(jìn)入視窗current

當(dāng)上一步全部完成后，圖片1 應(yīng)該進(jìn)入右邊待命，等待著進(jìn)入視窗

這里主要絕對(duì)定位后，會(huì)觸發(fā)BFC

$("#images > img:nth-child(1)").addClass("current");
$("#images > img:nth-child(2)").addClass("enter");
$("#images > img:nth-child(3)").addClass("enter");

setTimeout(function(){
    $("#images > img:nth-child(1)").removeClass("current").addClass("leave").one("transitionend",function(e){
        $(e.currentTarget).addClass("enter").removeClass("leave")
    });
    $("#images > img:nth-child(2)").removeClass("enter").addClass("current")
},3000);

setTimeout(function(){
    $("#images > img:nth-child(2)").removeClass("current").addClass("leave").one("transitionend",function(e){
        $(e.currentTarget).addClass("enter").removeClass("leave")
    });
    $("#images > img:nth-child(3)").removeClass("enter").addClass("current")
},6000);

setTimeout(function(){
    $("#images > img:nth-child(3)").removeClass("current").addClass("leave").one("transitionend",function(e){
        $(e.currentTarget).addClass("enter").removeClass("leave")
    });
    $("#images > img:nth-child(1)").removeClass("enter").addClass("current")
},9000);

這樣一輪循環(huán)就結(jié)束了，可以在往后添加setTimeout方法。

大量重復(fù)的代碼就需要尋找合適的的API 代替，一直播下去我們可以使用DOM APIsetInterval()

$("#images > img:nth-child(1)").addClass("current");
$("#images > img:nth-child(2)").addClass("enter");
$("#images > img:nth-child(3)").addClass("enter");

let n = 1;
setInterval(function(){
    $(`#images > img:nth-child(${x(n)})`).removeClass("current").addClass("leave").one("transitionend",function(e){
        $(e.currentTarget).addClass("enter").removeClass("leave")
    });
    $(`#images > img:nth-child(${x(n+1)})`).removeClass("enter").addClass("current")
    
    n++;    //這里n 是自然增長(zhǎng)，讓它一直玄幻下去
},3000)

//n取值應(yīng)該是[1,2,3,4,5,...,size]
let allImages = $("#images > img");
let size = allImages.length;
function x(n){
    if(n > size){   //如果n 大于節(jié)點(diǎn)size，n就取余
        n = n%size; 
        if(n === 0){    //如果n 取余為0，則讓n等于size
            n = size;
        }
    }
    return n;
}

這樣就是實(shí)現(xiàn)了無(wú)縫輪播，上面用到了ES6的插值法。
在CSS中img:nth-child(n)是沒(méi)有這種寫(xiě)法的，它不能像JS一樣可以用變量，這邊就用到了ES6 的插值法
`img:nth-child(${n})`

最后優(yōu)化下剛剛寫(xiě)的代碼