需求简介

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

我们来看一个需求

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

实现思路

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

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

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

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

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

技术方案

数据的动态切换

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

js复制代码
<script setup>
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()

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

动画添加

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

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

js复制代码
<script setup>
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()