最简单的无缝轮播

昨天学习了轮播的原理,今天再来看看无缝轮播的技术。
昨天学习的轮播机制类似于走马灯,所有图片排成一排,轮流在你眼前走过,你就会感觉他们动起来了,今天学的无缝轮播就不能用昨天的思路了,它和昨天最大的区别是,从最后一张回到第一张是直接切换的,不是先回到第一张图片的位置,然后再往后切换。
无缝轮播 无缝轮播的原来大致类似小时候跳大绳,小朋友一个个进入,一个个出来,出来后排到队伍末尾,等在着进入,无缝轮播也类似这种机制。
用昨天的思路写CSS,对图片用display:flex布局,你会发现图片永远是一字排开的,第二张一直在第一张后面,当你用transform: translateX(-100%)第一张往左移动,第二张的位置会受到影响,这样就实现不了我们想要的效果;我们想要的效果是每张都是独立,不能互相影响,所以这个CSS也不能这样写。

*{ 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%; }最简单的无缝轮播
文章图片
最简单的无缝轮播
文章图片
最简单的无缝轮播
文章图片

所以每张图片应该用绝对定位来实现,那它的父元素就要用相对定位来做了
*{ 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的窗口右边 }最简单的无缝轮播
文章图片
最简单的无缝轮播
文章图片
最简单的无缝轮播
文章图片

【最简单的无缝轮播】用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 也向左移动。
.images > img.right{ position:absolute; top:0; left:100% }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
整理下上面写的代码
*{ 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%; }最简单的无缝轮播
文章图片
最简单的无缝轮播
文章图片
最简单的无缝轮播
文章图片

上面代码可以实现一轮播放,如果要一直循环下去,多加几轮,或者用for循环去做。
本次用到了两个新的API:
  1. transitionend会在CSStransition动画结束后出发。
  2. one处理函数在每个元素上每种事件类型最多执行一次。
总结: 做无缝轮播的关键是队列,图片1动作的同时图片2也要动作,并且在动画结束之后去图片3后面待命,跟着图片3一起动作,就这样一直循环下去,就能实现无缝轮播了。

    推荐阅读