javascript - 原生js轮播图
PHPz
PHPz 2017-05-18 10:46:20
0
4
1112

最近在捣鼓原生js轮播图

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

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

1231这样思路

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

PHPz
PHPz

学习是最好的投资!

全部回复(4)
过去多啦不再A梦

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

排列是: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 的样式一样,没有差别,所以可以达到目的。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板