vue轮播效果加定时器并在页面关闭时关掉定时器

好的，下面是一个在 Vue 中实现轮播效果加定时器并在页面关闭时关掉定时器的完整示例：

<template>
  <div class="slider">
    <img v-for="(image, index) in images"
         v-bind:src="image.src"
         v-bind:class="{ active: currentIndex === index }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg' },
        { src: 'image2.jpg' },
        { src: 'image3.jpg' },
        { src: 'image4.jpg' },
        { src: 'image5.jpg' }
      ],
      currentIndex: 0,
      timer: null
    }
  },
  mounted() {
    this.startTimer();
    window.addEventListener('beforeunload', this.clearTimer);
  },
  beforeDestroy() {
    window.removeEventListener('beforeunload', this.clearTimer);
    this.clearTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 3000);
    },
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}
</script>

<style>
.active {
  display: block;
}

.slider img {
  display: none;
}
</style>

在上面的代码中，我们在 data 中添加了一个名为 timer 的属性，用于存储定时器的 ID。在 mounted 钩子函数中，我们调用了 startTimer 方法来启动定时器，并在 window 对象的 beforeunload 事件中调用了 clearTimer 方法来关闭定时器。

在 beforeDestroy 钩子函数中，我们移除了 beforeunload 事件监听器，并调用了 clearTimer 方法来确保在页面关闭时关闭定时器。

在 methods 中，我们定义了 startTimer 和 clearTimer 两个方法，分别用于启动定时器和关闭定时器。

希望这个示例可以帮助你实现在 Vue 中实现轮播效果加定时器并在页面关闭时关掉定时器。