简单的图片跑马灯效果

效果展示：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);
  }
}