最近在捣鼓原生js轮播图
我给切换加了transition 所以最后一张到第一张有很大的衔接问题。
思路是最后一张图片后面append第一张图片,然后父元素remove第一张图片
1231这样思路
请问有没有大神写过类似代码,可以参考下
学习是最好的投资!
我做过一个,参考了色魔张大妈的逻辑。
排列是:1 2 3 4 5 1
最后一张过渡到第一张,显示的是最后那个1。因为是顺序的,所以滑动如丝般顺滑。
关键:5到1之后,直接复原 width: 0,此时又变成初始状态,因为显示的都是1所以几乎无破绽。
width: 0
我也尝试过每滑过一幅就把它挪到队尾去,但是实现起来太麻烦而作罢。
不用remove,直接append一个已经存在的节点就是移动。然后就是改变滚动条了。
https://github.com/cubiq/Swip...我的第一个slider是参考这个的,IScroll的作者写的
不需要那样,而且dom节点的操作越少越好, 比如说你用这样一个排列顺序 5 1 2 3 4 5 1,当往右从5滚动到1的时候,在动画完成的瞬间,消除带transition的class,将位置重新调整到 第一个 1,然后把带transition的class重新赋值, 往左从 1 到 5 也是一样。 原理就是利用视觉欺骗,因为第一个2 和 右边5后面的那个1 的样式一样,没有差别,所以可以达到目的。
我做过一个,参考了色魔张大妈的逻辑。
排列是:1 2 3 4 5 1
最后一张过渡到第一张,显示的是最后那个1。因为是顺序的,所以滑动如丝般顺滑。
关键:5到1之后,直接复原
width: 0
,此时又变成初始状态,因为显示的都是1所以几乎无破绽。我也尝试过每滑过一幅就把它挪到队尾去,但是实现起来太麻烦而作罢。
不用remove,直接append一个已经存在的节点就是移动。然后就是改变滚动条了。
https://github.com/cubiq/Swip...
我的第一个slider是参考这个的,IScroll的作者写的
不需要那样,而且dom节点的操作越少越好, 比如说你用这样一个排列顺序 5 1 2 3 4 5 1,
当往右从5滚动到1的时候,在动画完成的瞬间,消除带transition的class,将位置重新调整到 第一个 1,然后把带transition的class重新赋值, 往左从 1 到 5 也是一样。 原理就是利用视觉欺骗,因为第一个2 和 右边5后面的那个1 的样式一样,没有差别,所以可以达到目的。