如何用JavaScript实现高效的连续图片轮播效果，模拟GIF动画？

<template>
  <div>
    @@##@@
    <button @click="pauseCarousel">暂停</button>
    <button @click="resumeCarousel">继续</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      imageList: [
        'url1.jpg',
        'url2.jpg',
        'url3.jpg',
        // ...  添加更多图片 URL
      ],
      intervalId: null
    };
  },
  computed: {
    currentImage() {
      return this.imageList[this.currentIndex];
    }
  },
  methods: {
    updateImage() {
      this.currentIndex = (this.currentIndex + 1) % this.imageList.length;
    },
    startCarousel() {
      if (!this.intervalId) {
        this.intervalId = setInterval(this.updateImage, 100); // 调整间隔时间，例如 100ms
      }
    },
    pauseCarousel() {
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
    resumeCarousel() {
      this.startCarousel();
    }
  },
  mounted() {
    this.startCarousel();
  },
  beforeDestroy() { // 使用 beforeDestroy 代替 destroyed
    this.pauseCarousel();
  }
};
</script>

<style scoped>
.image {
  width: 100%;
  height: auto;
}
</style>