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

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

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

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

“偷梁换柱” 过程

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

一次切换多个子项

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

  • {{item}}

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue