1.现在的效果是播到最后一张后 又倒回到第一张
4
540
滚动
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
如果你有4张图片：1，2，3，4。当加载到页面时，用JS去clone，第一张和第四张，结构变为：4，1，2，3，4，1，接下来就是怎么移动？
当移动到4时，如果在点击下一张，其实移动到的是clone的那个1，动画结束之后，然后重新定位到真正的1那个位置。
思路可以模仿bootstrap3的轮播组件：保存3个图片容器的引用变量，分别是前项、当前项、后项。每次执行轮播时，一般是在滑动过程中要同时展示两个图片。所以在滑动之前就要切换这三个变量中存储的图片。
比如说有1,2,3,4四张图片，当前显示第2张时，当前项就是2，前项是1，后项是3。然后从2轮播到3时，就会同时显示2和3两张图。
以此类推，如果当前项是最后一项4，那么前项就是3，后一项是1。如果只有两张图时，如果当前项是2，那么前项就是1，后项也是1。
我自己搞的轮播组件也是用的这个思路，可供参考。
1 2 3-> 1 2 3 4［内容是1］
在最后一张得后面用js复制出一个第一个li 也就是4［内容是1］ 实际是第四个
然后轮播 当轮播到的第四个结束后 没有动画效果得跳到第一个 然后继续轮播。。。
这个轮动是不是和无缝滚动的是一样的，只是过渡的效果不一样