javascript - 原生js轮播图

Question

最近在捣鼓原生js轮播图

我给切换加了transition 所以最后一张到第一张有很大的衔接问题。

思路是最后一张图片后面append第一张图片，然后父元素remove第一张图片

1231这样思路

请问有没有大神写过类似代码，可以参考下

Answer 1

我做过一个，参考了色魔张大妈的逻辑。

排列是：1 2 3 4 5 1

最后一张过渡到第一张，显示的是最后那个1。因为是顺序的，所以滑动如丝般顺滑。

关键：5到1之后，直接复原 width: 0，此时又变成初始状态，因为显示的都是1所以几乎无破绽。

我也尝试过每滑过一幅就把它挪到队尾去，但是实现起来太麻烦而作罢。

Answer 2

不用remove，直接append一个已经存在的节点就是移动。然后就是改变滚动条了。

Answer 3

https://github.com/cubiq/Swip...
我的第一个slider是参考这个的，IScroll的作者写的

Answer 4

不需要那样，而且dom节点的操作越少越好， 比如说你用这样一个排列顺序 5 1 2 3 4 5 1，
当往右从5滚动到1的时候，在动画完成的瞬间，消除带transition的class，将位置重新调整到 第一个 1，然后把带transition的class重新赋值， 往左从 1 到 5 也是一样。 原理就是利用视觉欺骗，因为第一个2 和 右边5后面的那个1 的样式一样，没有差别，所以可以达到目的。