有前辈用过transition加transitionEnd事件写过轮播图吗???

前辈好,如题,请问有前辈以前用过css3动画实现过无缝轮播图的demo吗??我想参考一下你们的源码是怎么写的。。

我自己写的时候,配合transitionend事件,无法实现最后一张图的跳转,永远都是直接滑到第一张,不知道哪里问题,并且左右的按钮点击事件,快速点击的话,整个图会切出去,也就是说transitionend事件在我快速点击下一张图的按钮的时候,是不生效的。。。

好多坑搞不懂,所以就想来问问有没有前辈有demo,必须是无缝滚动的那种,并且有左右按钮的,下标可以不用有。。。

打扰了,望指教!

阅读 3.4k
2 个回答

你把index == 4放到transitionEnd里执行,在动画没有结束的时候如果鼠标不停点击,index会持续增加:
图片描述

这样当transitionEnd执行时,index == 4就不会成立,所以后面的逻辑都不会执行,也就造成了translate3d的值不断增加显示空白。

题主,那个直接滑倒第一张的问题怎么解决的 :D

推荐问题