vue 实现无限轮播_Vue 实现无缝轮播

很多网站都会有轮播图的需求，而简单的轮播图实现通常会在展现完最后一个子项后中止轮播，或者者跳回到第一个子项重复轮播过程，这样的交互效果往往是存在断层的。接下来详情如何实现一个无缝的轮播图，达到这样的效果：

预览地址：https://jsfiddle.net/JunreyCen/qxogapws/

核心思想其实非常简单：当轮播到边界子项(Item 3)，并继续进行横移时，把即将要展现的子项(Item 1)挪到紧挨着 Item 3 的位置，执行横移，如下图 Step 1；

因为此时活跃子项的索引(index > 2)已经超出范围，在下一次横移进行前，需要把索引调整到正当范围内，并重置子项的位置，如下图 Step 2。注意，这一步需要把 transition 关闭，不然 “偷梁换柱” 的过程会被一览无遗。

“偷梁换柱” 过程

这里提供一份完整的代码实现。我略微做了点优化，支持左、右两个方向轮播

一次切换多个子项

原理上无非是支持多个子项的同时 “偷梁换柱” 罢了，详细的可以关注代码中的 next 函数。

• {{item}}

代码已发布在 github 上，欢迎大家提 issue 交流。