简单的图片跑马灯效果-编程知识

简单的图片跑马灯效果

效果展示：gif 因速度太快展示不够流畅
在这里插入图片描述

实现方式

   <div class="banner"><img class="img1" :src="image" v-for="(image, index) in imgs" :key="index" /></div><div class="banner"><img class="img2" :src="image" v-for="(image, index) in imgs2" :key="index" /></div><div class="banner"><img class="img3" :src="image" v-for="(image, index) in imgs3" :key="index" /></div>

关键代码

      imgs: ['https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/712ddb9b59aeb366ad5e4dd7ec0cc2bb/%E7%BB%84+11212%402x.png?v=1703216652386','https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/712ddb9b59aeb366ad5e4dd7ec0cc2bb/%E7%BB%84+11212%402x.png?v=1703216652386'],imgs2: ['https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/61f587f7d2068ddd91c7675fd0f2effd/%E7%BB%84+11213%402x.png?v=1703227392265','https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/61f587f7d2068ddd91c7675fd0f2effd/%E7%BB%84+11213%402x.png?v=1703227392265'],imgs3: ['https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/a4deec65f79880d031044eebdeef8ca8/%E7%BB%84+11214%402x.png?v=1703227419338','https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/a4deec65f79880d031044eebdeef8ca8/%E7%BB%84+11214%402x.png?v=1703227419338'],interval:null,startInfiniteScroll() {this.interval = setInterval(() => {// 将第一张图片移动到末尾，实现无限滚动效果this.imgs.push(this.imgs.shift())this.imgs2.unshift(this.imgs2.pop())this.imgs3.push(this.imgs3.shift())}, 4000) // 设置滚动间隔时间，单位为毫秒},mounted() {this.startInfiniteScroll()},beforeCreate() {clearInterval(this.interval)this.interval = null}

.banner {width: 100vw;min-width: 1232px;overflow: hidden;white-space: nowrap;display: flex;align-items: center;img {// width: 100%;// height: 100%;height: 87px;object-fit: cover;}.img1 {animation: scrollLeft 5s linear infinite;margin-right: 20px; // 看自己的间距}.img2 {animation: scrollRight 5s linear infinite;margin-right: 20px;}.img3 {animation: scrollLeft 5s linear infinite;margin-right: 20px;}
}@keyframes scrollLeft {0% {transform: translateX(0);}100% {transform: translateX(-100%);}
}@keyframes scrollRight {0% {transform: translateX(-100%);}100% {transform: translateX(0);}
}