需求简介

轮播图是我们前端开发中的一个常见需求，在项目开发中，我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。

我们来看一个需求

上述需求核心就是实现一个无缝轮播的切换效果。以这个需求为例，我们看看最终实现效果：

实现思路

要想实现一个无缝的轮播效果，其实非常简单，核心思想就是动态改变显示的列表而已。比如我们有这样一个数组

js复制代码const list = ref([    { name: 1, id: 1 },     { name: 2, id: 2 },    { name: 3, id: 3 }])

如果我们想无缝切换的展示这个数据，最简单的代码就是动态的改变下面的代码的index

js复制代码[xss_clean]    const index = ref(0)    const list = ref([{ name: 1, id: 1 }, { name: 2, id: 2 }, { name: 2, id: 2 }])[xss_clean]

那如何实现切换的样式呢？也非常简单，我们只要给元素添加一个出现样式和离开样式即可。现在，我们来具体实现这样一个需求。

技术方案

数据的动态切换

要想实现一个数据的动态循环切换效果，是非常容易的：

js复制代码[xss_clean]const selectIndex = ref(0)const list = ref(    [{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }])// #计时器实例let timer: any = null// >计时器逻辑const timeFuc = () => {    timer = setInterval(() => {      // 更改选中的index      if (selectIndex.value >= list.value.length - 1) {        selectIndex.value = 0      } else {        selectIndex.value++      }    }, 5000)}timeFuc()[xss_clean]

上述代码中，我们设置了一个定时器，定时器每5s执行一次，每次执行都会动态更改当前要显示的数据索引值，当索引值达到最大实，在将其重置。通过上述的简单代码，我们就实现了一个可以自动切换的循环渲染的卡片。

动画添加

要想实现最终效果的动态效果也非常容易，我们只需要给每个元素出现时设置一些样式，离开时设置一些样式即可。借助vue的Transition组件，我们能很容易实现这样一个效果。

如果你不了解vue的Transition组件，请去官网补充下知识：cn.vuejs.org/guide/built…

js复制代码[xss_clean]const selectIndex = ref(0)const list = ref(    [{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }])// #计时器实例let timer: any = null// >计时器逻辑const timeFuc = () => {    timer = setInterval(() => {      // 更改选中的index      if (selectIndex.value >= list.value.length - 1) {        selectIndex.value = 0      } else {        selectIndex.value++      }    }, 5000)}timeFuc()[xss_clean]