背景：须要用户头像（3个）左边局部叠层展现，并且反对循环滚动
实现：
扭转dom上绑定的款式id，论循替换
<template> <div class="slider-headimg"> <div class="out"> <div class="inner"> <div class="img" ref="headimgList" v-for="(item,index) in sliderHeadimgList" :key="index"> <img :src="item.headImgUrl"> </div> </div> </div> </div></template><script>export default { props: { sliderHeadimgList: { type: Array, default: () => [] } }, data () { return { timer: null, // 定义地位数组 idArr: ['first', 'second', 'right', 'last'] } }, mounted () { this.init() }, destroyed () { if (this.timer) { clearInterval(this.timer) } }, methods: { init () { // 初始化图片地位，依据id不同，初始化款式 var img = this.$refs.headimgList img[0].id = this.idArr[0] img[1].id = this.idArr[1] img[3].id = this.idArr[3] for (let i = 0; i < (this.sliderHeadimgList.length - 4); i++) { this.idArr.splice(3, 0, 'left') } this.initialize() // 定时器图片轮播 this.timer = setInterval(this.next, 1000) }, next () { // 将地位数组的最初一个元素删除，并将删除元素增加到地位数组第一个 this.idArr.unshift(this.idArr.pop()) this.initialize() }, // 将地位数组元素作为id赋值给img，达到轮播成果 initialize () { var img = this.$refs.headimgList for (var i = 0; i < img.length; i++) { img[i].id = this.idArr[i] } } }}</script><style lang="less">.slider-headimg { position: relative; display: flex; align-items: center; width: 200px; padding-bottom: 55px; margin-right: 10px;}.out { width: 100%; height: 100%; position: relative; .inner { width: 100%; .img { width: 48px; height: 48px; position: absolute; transition: 0.3s; display: flex; border-radius: 50%; border: 1px solid #fff; img { width: 100%; height: 100%; border-radius: 50%; } } } //设置id款式 #last { display: flex; transform: translateX(48px); z-index: 3; opacity: 1; } #first { display: flex; transform: translateX(96px); z-index: 2; opacity: 1; } #second { display: flex; transform: translateX(144px); z-index: 1; opacity: 1; } #left { display: none; transform: translateX(-48px); z-index: 1; opacity: 0; } #right { display: flex; transform: translateX(240px); z-index: 1; opacity: 0; }}</style>