<script setup>
import { ref, computed } from 'vue';

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

const currentIndex = ref(0);

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

const currentImage = computed(() => images[currentIndex.value]);

</script>

<template>
    <div class="image-gallery">
        <img :class="currentIndex === index ? 'active' : ''" v-for="(item, index) in images" :key="item" :src="item" alt="Gallery Image" />
    </div>
  </template>

<style scoped>
.image-gallery {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-gallery img {
    position:absolute;
    top:0;
    left:0;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}

.image-gallery img.active {
    opacity: 1;
}



</style>