vue.js实现图片轮播

<template>
  <div class="carousel">
    <img :src="images[currentIndex]" alt="carousel image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        'path/to/image3.jpg'
      ],
      currentIndex: 0,
      timer: null
    };
  },
  mounted() {
    this.startCarousel();
  },
  beforeUnmount() {
    this.stopCarousel();
  },
  methods: {
    startCarousel() {
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 3000); // 每3秒切换一次图片
    },
    stopCarousel() {
      clearInterval(this.timer);
    }
  }
};
</script>

<style>
.carousel img {
  width: 100%;
  height: auto;
}
</style>