实现的思路很简单，就是和“贪吃蛇”游戏中蛇身体的移动逻辑一样，每次前进的时候先删除尾部元素，然后再添加到头部，这样无论身体多庞大，始终只有两个元素在改变位置：
基础效果
有了思路，就不难写出轮播了，这里为了方便使用Vue2创建演示，后面会放上完整Demo及源码，文章只讲思路，就不贴大段代码了，有需要的小伙伴可以先点个收藏~
其中前进还是一样通过改变left来滚动，只是在滚动结束后便立刻修改数据：
// 核心代码
const ulDom = document.getElementsByClassName('ul')[0] // 拿到页面Dom实例
ulDom.style.left = xxx // 控制滚动，注意需要设置transition才有动画
this.images.push(this.images.shift()) // 对轮播列表的数组首尾元素互换但是回退就有点不一样了，试想如果此时在第一张图，那么向左跳转的话是没有数据的，也就会产生空白的一片，所以回退做了特殊处理，先把尾部添加到数组前面，同时悄悄地轮播到下一张(去除动画效果)，然后才进行回退的操作，等动画结束后pop()把数组末尾删除：
从页面效果上可能没什么感觉，我们放慢来看看DOM是如何变化的：
列表虚拟化
可能大家也注意到了，在这个实例中“当前选中”下标是要另外计算的，因为真实的数组下标总是在来回加1减1地改变而已，所以我们可以在此基础上轻松做出一个虚拟列表，做到真正的“无限”滚动。
假设轮播数组足够大，且页面结构又繁多复杂情况下，直接渲染轮播会产生很多DOM结构，这将导致页面性能下降，下面放上完整在线代码演示，你可以修改“列表总数”为9999，然后关闭虚拟列表开关，此时你可能会卡到根本点不动轮播：
一般来说可能不会有大量轮播图的场景，笔者的业务需求是在数据大屏中展示海报视频等轮播，而数据量是没有上限的，就可能会出现大量轮播数据的请求。
此时根据“展示个数”动态的修改实际渲染的DOM个数，无论来多少张轮播都不会影响到性能了，利用Vue的计算属性可以很轻松地做到：
computed: {
realImages() {
return this.images.slice(0, Number(this.slidesPerView) + 2)
// this.slidesPerView 即为展示个数，轮播图实际渲染个数总长度只会比展示个数多两个
},
},图片加载闪动
这是后续的一个优化点，由于数据截取的原因，我会一直改变渲染的数组，在页面中的表现为图片突然更换了地址，如果该元素节点存在上一张图片，则会产生闪动：
如下图，可以看到我停留在第10张时啥也没做，但由于新的图片url其实还在加载，等到加载完了显示出来，图片突然闪动变化，体验就非常怪。
于是我重新写了一个图片容器组件来代替img标签，组件在img上层覆盖上一个loading遮罩，利用img标签的onLoad事件来判断图片加载完成，再隐藏loading，每次src改变的时候就重新出现loading，代码实现非常简单：
<template>
<div class="img__box">
<div v-show="loading" class="load"></div>
<img v-show="!loading" :src="src" @load="loadDone" />
</div>
</template>
<script>
export default {
props: {
src: {},
},
data() {
return {
loading: false,
}
},
watch: {
src() {
this.loading = true
},
},
methods: {
loadDone() {
this.loading = false
},
},
}
</script>
<style scoped>
.img__box {
position: relative;
overflow: hidden;
}
.img__box > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.load {
position: absolute;
width: 100%;
height: 100%;
}
.load::after {
position: absolute;
content: '';
top: 50%;
left: 50%;
width: 30px;
margin-left: -15px;
height: 30px;
margin-top: -15px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-top-color: transparent;
border-radius: 100%;
animation: circle infinite 0.75s linear;
}
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>这样把轮播的img标签直接替换为这个组件就解决问题了：
最后附上：完整的Demo源码
