fls-asp-qr-intelligent-tutoring/src/views/demo/Home.vue

<script setup>
import { ref } from "vue";
// 用于sse请求 对sse进行了封装 支持post携带参数请求 文档: https://www.npmjs.com/package/@microsoft/fetch-event-source
import { fetchEventSource } from "@microsoft/fetch-event-source";

const images = ["image0.png", "image1.png", "image2.png", "image3.png"];

const currentIndex = ref(0);

setInterval(() => {
  currentIndex.value = (currentIndex.value + 1) % images.length;
}, 5000); // 切换图片间隔时间（毫秒）
</script>

<template>
  <div class="main">
    <div class="bg">
      <img
        :class="currentIndex === index ? 'active' : ''"
        v-for="(item, index) in images"
        :key="item"
        :src="item"
      />
    </div>
  </div>
</template>

<style scoped>
.main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.bg img.active {
  opacity: 1;
}
</style>