vue3无限轮播案例

<template>
  <div class="about">
    <div id="wrap">
      <ul id="ul" ref="ul">
        <li>
          <img src="@/assets/images/1.jpg" />
        </li>
        <li>
          <img src="@/assets/images/2.jpg" />
        </li>
        <li>
          <img src="@/assets/images/3.jpg" />
        </li>
        <li>
          <img src="@/assets/images/4.jpg" />
        </li>
        <li>
          <img src="@/assets/images/5.jpg" />
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#wrap {
  width: 400px;
  height: 500px;
  overflow: hidden;
  position: relative;
}
#ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  width: 400px;
  height: 400px;
}
</style>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const ul = ref<HTMLDivElement | null>(null);
const oul = () => ul.value as HTMLDivElement;
const oli = () => oul().children as HTMLCollection;
onMounted(() => {
  oul().innerHTML = oul().innerHTML + oul().innerHTML; //拼接li，因为图片可能是任意张
  oul().style.height =
    (oli()[0] as HTMLDivElement).clientHeight * oli().length + "px"; //ul的宽度等于所有图片宽度的总和
  setInterval(() => {
    if (oul().offsetTop < -oul().offsetHeight / 2) {
      oul().style.top = "0"; //如果ul已经显示完了一组，也就是宽度的一半，那么就把他拉回来重新轮播
    } else {
      oul().style.top = oul().offsetTop - 5 + "px";
    }
  }, 30);
});
</script>