vue实现图片滚动（类似走马灯效果）可停顿

vue实现图片滚动（类似走马灯效果）

<template>
  <div class="scroll-up" ref="scroll">
    <ul>
      <li v-for="item in scrollData" :key="item.id">
        <p>
          <img :src="item.title" alt="" />
        </p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Action, Mutation, State, Getter } from "vuex-class";
@Component({})
export default class tag extends Vue {
  scrollData: any = [
    {
      id: 1,
      title:
        "https://img0.baidu.com/it/u=4010152342,3338255652&fm=26&fmt=auto&gp=0.jpg",
    },
    {
      id: 2,
      title:
        "https://img0.baidu.com/it/u=2660737697,322287091&fm=26&fmt=auto&gp=0.jpg",
    },
    {
      id: 3,
      title:
        "https://img0.baidu.com/it/u=1914016305,2587323469&fm=26&fmt=auto&gp=0.jpg",
    },
    {
      id: 4,
      title:
        "https://img0.baidu.com/it/u=3212644175,647115577&fm=26&fmt=auto&gp=0.jpg",
    },
    {
      id: 5,
      title:
        "https://img0.baidu.com/it/u=134217195,1637945727&fm=26&fmt=auto&gp=0.jpg",
    },
  ];
  scrollArea: any = "";
  speed: any = 2; //设置播放速度
  timer: any = null;
  delay: any = 1000; //设置停顿时间
  liHeight: any = "";

  startScroll() {
    this.timer = setInterval(this.scrollUp, this.speed);
    this.scrollArea.scrollTop++;
  }
  scrollUp() {
    if (this.scrollArea.scrollTop % this.liHeight == 0) {
      clearInterval(this.timer);
      setTimeout(this.startScroll, this.delay);
    } else {
      this.scrollArea.scrollTop++;
      if (this.scrollArea.scrollTop >= this.scrollArea.scrollHeight / 2) {
        this.scrollArea.scrollTop = 0;
      }
    }
  }
  mounted() {
    setTimeout(() => {
      this.scrollArea = this.$refs.scroll;
      let li = this.scrollArea.getElementsByTagName("li");
      this.liHeight = li[0].offsetHeight;

      this.scrollArea.scrollTop = 0;

      this.scrollArea.innerHTML += this.scrollArea.innerHTML;

      this.scrollData.length > 1 && setTimeout(this.startScroll, this.delay);
    }, 1000);
  }
}
</script>

<style lang='less' scoped>
.scroll-up {
  height: 100px;
  line-height: 100px;
  overflow: hidden;
}
</style>