当前位置：首页 > VUE

vue 过渡实现轮播图

2026-01-21 20:32:43VUE

使用 Vue 过渡实现轮播图

基本结构

在 Vue 中可以通过 <transition> 或 <transition-group> 组件结合 CSS 过渡或动画实现轮播效果。以下是一个基于 v-if 和过渡的简单实现：

<template>
  <div class="carousel">
    <transition name="fade" mode="out-in">
      <img :key="currentIndex" :src="images[currentIndex]" alt="Slide">
    </transition>
    <button @click="prev">Previous</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      currentIndex: 0
    };
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    }
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

自动轮播

通过 setInterval 实现自动轮播功能，注意在组件销毁时清除定时器：

vue 过渡实现轮播图

export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      currentIndex: 0,
      interval: null
    };
  },
  mounted() {
    this.interval = setInterval(this.next, 3000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }
  }
};

滑动效果

通过 CSS 实现横向滑动过渡效果：

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

使用 `<transition-group>`

如果需要保留 DOM 结构（如多个图片同时渲染），可以使用 <transition-group>：

vue 过渡实现轮播图

<transition-group name="slide" tag="div" class="carousel-container">
  <img v-for="(image, index) in images" 
       :key="index" 
       :src="image" 
       v-show="index === currentIndex">
</transition-group>

指示器和导航

添加指示器和导航按钮增强交互性：

<div class="indicators">
  <span v-for="(image, index) in images" 
        :key="index" 
        @click="currentIndex = index"
        :class="{ active: index === currentIndex }">
  </span>
</div>

响应式设计

通过 CSS 确保轮播图适应不同屏幕尺寸：

.carousel {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}
.carousel img {
  width: 100%;
  display: block;
}

通过以上方法，可以灵活实现具有过渡效果的 Vue 轮播图，支持手动导航、自动播放和响应式设计。