解决在使用CSS3制作不间断轮播图中 收尾连接后Interval 延时问题

2019独角兽企业重金招聘Python工程师标准>>>

问题：使用CSS3制作不间断轮播图中 原理就是克隆一个首个轮播图在整个轮播图的尾部，尾部播放放以后继续播放克隆的首部块，然后在把真整个块拉回原来的位置 继续播放。 其中涉及到的一个体验不是很好的地方 就是 把整个轮播图拉回来以后 继续播放时，会比平时延迟两倍的时间才开始播放，找了很久的问题 终于找到了 因为这里涉及到两个操作过程。1：把整个块拉回初始位置 2：第一个轮播图等待播放时间 所以是两倍的时间体验感不是很好。

解决方案：‘’卡时间‘’ 原理就是在整个块恢复到初始位置的时候 多加3个步骤 1是关掉interval 2是播放第一个轮播图的过程 3 重新开启interval 这里刚好把轮播图的播放时间卡掉了 节约了等待时间。整个流程 就很顺畅

代码：

H5:

CSS:

JS

转载于:https://my.oschina.net/u/3587107/blog/1840145