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

剛剛的輪播用具體思維做，因為不知道它有哪幾種狀態(tà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;
}

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

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

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

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

現(xiàn)在就是要寫三個類，通過JS 激活class 來實現(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)在當前視窗current，圖片2、圖片3 應該在視窗右邊待命，隨時準備進入視窗enter

當圖片1 離開視窗時leave，圖片2 進入視窗current

當上一步全部完成后，圖片1 應該進入右邊待命，等待著進入視窗

這里主要絕對定位后，會觸發(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)就結束了，可以在往后添加setTimeout方法。

大量重復的代碼就需要尋找合適的的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 是自然增長，讓它一直玄幻下去
},3000)

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

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

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