需求简介

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

我们来看一个需求

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

实现思路

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

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

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

js复制代码