如何使用Vue实现无缝滚动广告特效

<template>  <div class="seamless-scroll-ad">    <ul ref="scrollList" class="ad-list">      <li v-for="(ad, index) in ads" :key="index" class="ad-item">{{ ad }}</li>      <li v-for="(ad, index) in ads" :key="index" class="ad-item">{{ ad }}</li>    </ul>  </div></template><script>export default {  data() {    return {      ads: ['广告1', '广告2', '广告3', '广告4'], // 广告内容数组      scrollTimer: null, // 计时器变量      scrollSpeed: 50, // 滚动速度      scrollInterval: 2000 // 滚动间隔    };  },  mounted() {    this.startScroll(); // 页面加载完成后开始滚动  },  methods: {    startScroll() {      this.scrollTimer = setInterval(() => {        this.$refs.scrollList.scrollLeft += 1; // 每次滚动1个像素        if (this.$refs.scrollList.scrollLeft % (this.$refs.scrollList.offsetWidth / 2) === 0) {          clearInterval(this.scrollTimer); // 滚动到一半时停止滚动          setTimeout(() => {            this.startScroll(); // 延迟间隔后重新开始滚动          }, this.scrollInterval);        }      }, this.scrollSpeed);    }  }};</script><style scoped>.ad-list {  display: flex;  list-style: none;  padding: 0;  margin: 0;}.ad-item {  padding: 10px;}</style>

<template>  <div id="app">    <h1>无缝滚动广告特效</h1>    <seamless-scroll-ad></seamless-scroll-ad>  </div></template><script>import SeamlessScrollAd from './components/SeamlessScrollAd.vue';export default {  components: {    SeamlessScrollAd  }};</script>