最简单的无缝轮播

昨天学习了轮播的原理，今天再来看看无缝轮播的技术。

昨天学习的轮播机制类似于走马灯，所有图片排成一排，轮流在你眼前走过，你就会感觉他们动起来了，今天学的无缝轮播就不能用昨天的思路了，它和昨天最大的区别是，从最后一张回到第一张是直接切换的，不是先回到第一张图片的位置，然后再往后切换。

无缝轮播

无缝轮播的原来大致类似小时候跳大绳，小朋友一个个进入，一个个出来，出来后排到队伍末尾，等在着进入，无缝轮播也类似这种机制。

用昨天的思路写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一起动作，就这样一直循环下去，就能实现无缝轮播了。