84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
最近在捣鼓原生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 的样式一样,没有差别,所以可以达到目的。