原生js实现自动向上循环播放功能 - Vue3

粘个贴，方便自己用哈哈哈哈哈哈

代码

// ----------------------------- HTML
<div class="scroll-box" id="enterprise-review" 
@mouseenter="rollStopFn()" @mouseleave="rollStartFn(30)">
    <ul class="enterprise-course" id="enterprise-ul1">
        <li v-for="item in courseList" :key="item.id">
            <span style="font-weight: 700">
                {{ item.title }}
            </span>{{ item.subTitle }}
        </li>
     </ul>
     <ul class="enterprise-course" id="enterprise-ul2"></ul>
 </div>
// ----------------------------- JavaScript
let timer = ref(0);
// 加载后开启自动轮播
onMounted(() => {
  // 和HTML中鼠标移出事件时间同步
  roll(30);
});
function roll(t: any) {
  // 获取实例ul1
  let ul1 = document.getElementById("enterprise-ul1") as HTMLElement;
  // 获取实例ul2
  let ul2 = document.getElementById("enterprise-ul2") as HTMLElement;
  // 获取实例review ---ul1＋ul2外层盒子实例
  var review = document.getElementById("enterprise-review") as HTMLElement;
  // 数据赋值 --无缝循环
  ul2.innerHTML = ul1.innerHTML;
  review.scrollTop = 0;
  rollStartFn(t);
}
// 开启滚动
function rollStartFn(t: any) {
  let ul1 = document.getElementById("enterprise-ul1") as HTMLElement;
  let ul2 = document.getElementById("enterprise-ul2") as HTMLElement;
  var review = document.getElementById("enterprise-review") as HTMLElement;
  ul2.innerHTML = ul1.innerHTML;
  rollStopFn();
  timer.value = setInterval(() => {
    if (review.scrollTop >= ul1.scrollHeight) {
      review.scrollTop = 0;
    } else {
      review.scrollTop++;
    }
  }, t);
}
// 鼠标移上停止自动滚动
function rollStopFn() {
  clearInterval(timer.value);
}

// ----------------------------- CSS
// 样式自定义 高度和overflow必须要有
.scroll-box {
    height: 250px;
    overflow: hidden;
 }

本篇由本人自己项目中相关业务进行的列表循环播放功能实现，仅供参考，该功能目前没有出现bug，如有更好的建议，欢迎指点，共同进步。