如何用jQuery做一个无缝轮播

如何用jQuery做一个无缝轮播

效果预览

效果预览点击

1.思路

设定一个显示窗口，图片在窗口显示后则到图片队列排队。实现无缝轮播。

1.1 两个图片轮播

将图片一和二实现轮播，先将图片一二设为相对定位，然后利用jQuery添加css样式。两秒实现一次转换。两秒的时候，图片一二一起移位，看起来像轮播。

//利用jQuery添加样式
setTimeout(function () {
   
    $('.images>img:nth-child(1)').css({
   
        transform: 'translateX(-100%)'
    })
    $('.images>img:nth-child(2)').css({
   
        transform: 'translateX(-100%)'
    })
},2000)

2.2 实现三个图片轮播

按照刚才图片一二的思路，将第三个图片参与其中。
下一个两秒完成图片二三的轮播。

.images>img:nth-child(1){
   
    position: absolute;/*第一个做绝对定位，爸爸做相对定位*/
    top: 0;
    left: 0;
}
.images>img:nth-child(2){
   
    position: absolute;/*第一个做绝对定位，爸爸做相对定位*/
    top: 0;
    left: 100%;
}
.images>img:nth-child(3){
   
    position: absolute;/*第一个做绝对定位，爸爸做相对定位*/
    top: 0;
    left: 100%;
}
.images>img.right{
   
    position: absolute;/*第一个做绝对定位，爸爸做相对定位*/
    top: 0;
    left: 100%;
}

//利用jQuery添加样式
setTimeout(function () {
   
    $('.images>img:nth-child(1)').css({
   
        transform: 'translateX(-100%)'
    })
    $('.images>img:nth-child(2)').css({
   
        transform: 'translateX(-100%)'
    })
},2000)

setTimeout(function () {
   
    $('.images>img:nth-child(2)').css({
   
        transform: 'translateX(-200%)'
    })
    $('.images>img:nth-child(3)').css({
   
        transform: 'translateX(-100%)'
    })
},4000)

2.3 实现将第一个图片放到第三个图片右边

//利用jQuery添加样式
setTimeout(function () {
   
    $('.images>img:nth-child(1)').css({
   
        transform: 'translateX(-100%)'
    })
    $('.images>img:nth-child(2)').css({
   
        transform: 'translateX(-100%)'
    })
    $('.images>img:nth-child(1)').one('transitionend',function