这是一个循环出来的ul 让每一个li平滑的轮播,而不是生硬的切换
<ul>
<li v-for="(item,index) in giftList" :key="index" :class="{ 'carousel-animated1':isAnimated1 }">
<img :src="item.gift_image" alt="">
<button>{{item.gift_title}}</button>
</li>
</ul>
控制器
methods:{
scroll1 () {
// 开启动画
this.isAnimated1 = true
// 倒计时动画时间
setTimeout(() => {
// 将数组第一个元素添加到数组尾部
this.giftList.push(this.giftList[0])
// 移除数组第一个元素
this.giftList.shift()
// 关闭动画
this.isAnimated1 = false
// 动画时间需要与 .carousel-animated 中设置的时间一致
}, 2000)
},
}
mounted () {
// 开启定时器
setInterval(this.scroll1, 2000)
}
下面是carousel-animated1
.carousel-animated1 {
transition: transform 2s;
transform: translateX(-2.2rem);
}
用纯css无缝滚动 就能实现你的需求