求前辈指点,我非要搞定transition3d做轮播图!!

发布于 2022-09-06 06:28:47 字数 463 浏览 20 评论 0

前辈,请看看我这个
用transform3d写的轮播图效果练习

用css3的transform3d写的轮播图效果,逻辑不知道哪里出错,自动播放,点击圆点切换图片都没什么问题,就是点击右边的按钮,切换下一张,如果快速切换的,前辈可以点点看,就出错了,轮播图整个都切走了,变白了。。。。

困扰已久,望前辈指教!

这个是码云那个练习的地址练习地址

请问有前辈有用transform实现轮播图的demo吗??望借鉴,只要有两边按钮切换功能就可以了,我就想看看前辈的demo快速切换的时候会不会乱。。。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

失眠症患者 2022-09-13 06:28:47

我看了一下,因为你用的是:"transform": "translate3d("+(-1200*index)+"px,0,0)"这个来控制展示图片的位置的,但是我用F12查看,你的代码会出现:transition: all 1s ease; transform: translate3d(-48000px, 0px, 0px); 48000甚至更多,,所以说,应该是你的index到了4没有清0到1.
你看下我图中标记的2处,我觉得换成>=比==好,这样越界就直接变了。。

clipboard.png

至于出现你这种越界不变的情况,我个人认为是程序运行是需要时间的,,所以本来index=4应该要变成1,但是上面定时又运行,导致index++变成了4,所以再也变不回去,所以出问题了。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文