Skip to content

Latest commit

 

History

History
7 lines (7 loc) · 907 Bytes

README.md

File metadata and controls

7 lines (7 loc) · 907 Bytes

lunbo

无缝轮播,基于轮播实现第一张图片和最后一张图片切换时不会产生倒退现象。
控制ul的margin-left实现轮播,通过index来控制图片的切换。
而无缝轮播则需要前后添加两张图片,重点在于,切换到最后一张图片时瞬间回到第一张图片(这时候应该是第二张图片)。
这时候通过index控制是可以的,但是需注意,这时候图片长度已经超过下标长度,所以index=index%length,定位可以考虑直接用i代替index。
但是由于ul的transition的存在,依然存在回头的动画效果,必须先remove,切换之后还需要加上,这边用笨方法setTimeout设置一段时间间隔,避免remove和add的瞬间执行。
这时候当你点击左右按钮过快时,会发现无缝效果又没了,所以左右按钮的两次点击加上生效时间0.3s。