昨天進修了輪播的道理，本日再來看看無縫輪播的手藝。

昨天進修的輪播機制相似於走馬燈，一切圖片排成一排，輪番在你面前走過，你就會覺得他們動起來了，本日學的無縫輪播就不能用昨天的思緒了，它和昨天最大的區別是，從末了一張回到第一張是直接切換的，不是先回到第一張圖片的位置，然後再今後切換。

無縫輪播

無縫輪播的本來大抵相似小時刻跳大繩，小朋友一個個進入，一個個出來，出來後排到部隊末端，等在着進入，無縫輪播也相似這類機制。

用昨天的思緒寫CSS，對圖片用display:flex規劃，你會發明圖片永遠是一字排開的，第二張一向在第一張背面，當你用transform: translateX(-100%)第一張往左挪動，第二張的位置會受到影響，如許就完成不了我們想要的結果；我們想要的結果是每張都是自力，不能相互影響，所以這個CSS也不能如許寫。

<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .window{
        width: 532px;
        height:421px;
        overflow:hidden;
        margin:20px auto;
    }
    .images{
        display: flex;
    }
    .images > img{
        width:100%;
    }
</style>
<div class="window">
    <div id="images" class="images">
        <img src="./images/圖片1.png" alt="">
        <img src="./images/圖片2.png" alt="">
        <img src="./images/圖片3.png" alt="">
    </div>
</div>

所以每張圖片應該用相對定位來完成，那它的父元素就要用相對定位來做了

<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .window{
        width: 532px;
        height:421px;
        overflow:hidden;
        margin:20px auto;   //居中
    }
    .images{
        position:relative;      //父元素做相對定位
        
    }
    .images > img{
        width:100%;     //寬度為100%何父元素一樣寬
        transition: all 0.3s; 
    }
    .images > .png1{
        position: absolute;     //子元素做相對定位，父元素做相對定位
        top:0;      //初始位置以class=window的窗口為基準，坐標[0,0]
        left:0;
    }
    .images > .png2{
        position: absolute;
        top:0;
        left:100%;  //圖片2在class=window的窗口右側
    }
    .images > .png3{
        position: absolute;
        top:0;
        left:100%;     //圖片2在class=window的窗口右側
    }
</style>
<div class="window">
    <div id="images" class="images">
        <img class='png1' src="./images/1.png" alt="">
        <img class='png2' src="./images/2.png" alt="">
        <img class='png3' src="./images/3.png" alt="">
    </div>
</div>

用JS 來掌握圖片挪動的動畫，當png1 向左挪動時，png2也要向左挪動（加上過渡動畫），由於兩個動畫前後實行時刻太短，瀏覽器會默許同時舉行，所以用setTimeout()設置一個定時器，在時刻到后實行一段代碼或許函數

setTimeout(function(){
    $('#images > .png1').css({transform:'translateX(-100%)'}); //png1向左挪動100%
    $('#images > .png2').css({transform:'translateX(-100%)'});  //png2也向左挪動100%
},3000)

setTimeout(function{
    $('#images > .png2').css({transform:'translateX(-200%)'}); //png2在向左挪動100%，這裏就變成200%
    $('#images > .png3').css({transform:'translateX(-100%)'}); //png3也向左挪動100%
},6000)

第一個定時器3s后實行，png1 向左挪動同時png2 也在向左挪動；第二定時器6s后實行，png2 向左挪動的同時png3 也向左挪動，這就完成了第一輪的輪播，那如何讓它輪迴播放呢？

在第一個定時器實行的時刻，png1 向左挪動后，在視窗的左側，我們已讓它跑到視窗的右側待命，讓png3 向擺布的同時png1 也向左挪動。

<style>
    .images > img.right{
        position:absolute;
        top:0;
        left:100%
    }
</style>
setTimeout(function(){
    $('#images > .png1').css({transform:'translateX(-100%)'});
    $('#images > .png2').css({transform:'translateX(-100%)'});
    $('#images > .png1').one('transitionend',function(e){
        $(e.currentTarget).addClass('right').css({transform:'none'})        //當png1動畫實行完畢以後，給它增加一個class，讓它跑到右側待命，這內里要把左移的css給幹掉，不然它會一向在那裡
    });
},3000)

transitionend會在CSStransition動畫完畢后動身。
one處置懲罰函數在每一個元素上每種事宜範例最多實行一次。

這裏用on，你會發明一個題目，當動畫完畢后，它就會把right給加上去，致使用於在右側，所以這裏要把on改成one。

整頓下上面寫的代碼

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
    *{
        margin:0;
        padding:0
        box-sizing:border-box;
    }
    
    .window{
        height:300px;
        width:400px;
        margin:20px auto;
        overflow:hidden;
    }
    .images > img{
        transition: all 0.3s
    }
    .images{
        position:relative;
    }
    .images > .png1{
        position:absolute;
        left:0;
        top:0;
    }
    .images > .png2{
        position:absolute;
        left:100%;
        top:0;
    }
    .images > .png3{
        position:absolute;
        left:100%;
        top:0;
    }
    .images > img.right{
        position:absolute;
        top:0;
        left:100%;
    }
</style>
<div class="window">
    <div id="images" class="images">
        <img class='png1' src="./images/1.png" alt="">
        <img class='png2' src="./images/2.png" alt="">
        <img class='png3' src="./images/3.png" alt="">
    </div>
</div>
<script>
    setTimeout(function(){
        $('#images > .png1').css({transform:'translateX(-100%)'});
        $('#images > .png2').css({transform:'translateX(-100%)'});
        $('#images > .png1').one('transitionend',function(e){
            $(e.currentTarget).addClass('right').css({transform:'none'})
        })
    },3000)

    setTimeout(function(){
        $('#images > .png2').css({transform:'translateX(-200%)'});
        $('#images > .png3').css({transform:'translateX(-100%)'});
        $('#images > .png2').one('transitionend',function(e){
            $(e.currentTarget).addClass('right').css({transform:'none'})
        })
    },6000)
    
    setTimeout(function(){
        $('#images > .png3').css({transform:'translateX(-200%)'});
        $('#images > .png1').css({transform:'translateX(-100%)'});
        $('#images > .png3').one('transitionend',function(e){
            $(e.currentTarget).addClass('right').css({transform:'none'})
        })
    },9000)
</script>

上面代碼能夠完成一輪播放，假如要一向輪迴下去，多加幾輪，或許用for輪迴去做。

本次用到了兩個新的API：

1. transitionend會在CSStransition動畫完畢后動身。
2. one處置懲罰函數在每一個元素上每種事宜範例最多實行一次。

總結：

做無縫輪播的關鍵是行列，圖片1行動的同時圖片2也要行動，並且在動畫完畢以後去圖片3背面待命，隨着圖片3一同行動，就如許一向輪迴下去，就可以完成無縫輪播了。