Javascript – natives JS-Karusselldiagramm

Question

Habe kürzlich an nativen JS-Karussellbildern herumgebastelt

Ich habe der Umschaltung einen Übergang hinzugefügt, daher gibt es ein großes Verbindungsproblem vom letzten Bild zum ersten Bild.

Die Idee besteht darin, das erste Bild nach dem letzten Bild anzuhängen und dann das erste Bild aus dem übergeordneten Element zu entfernen

1231 diese Denkweise

Gibt es einen Meister, der einen ähnlichen Code geschrieben hat? Sie können sich darauf beziehen

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 的样式一样，没有差别，所以可以达到目的。