基于css3transform属性实现无缝手动轮播

图片描述

点击“前后”按钮改变transform的值实现轮播效果,难点在于如何在从1到3的过程中有动画,这个动画结束后立马完成A到C状态切换,也就是transform从0到-3000px的切换,这个过程没有动画。

阅读 4.4k
2 个回答

简易轮播图

这是我写的一个轮播图DEMO,用的是JQuery。
结构其实和你画的这张图是一样的,可以参考一下。

其实有没有动画就看过度时间;若是过度时间不为零那就是有动画;若是过度时间为0那就没有动画;
结合这个:你可以考虑一下,在1→3的过程设置过度时间,这样1→3有动画;在动画完成后立马执行A→C的变化,这个过程中设置过度时间为0;这样A→C就没有动画;这样就可以了;

下面这个图是我写的js,设置过度时间为0;
clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题