vue实现轮播图动画

Vue 轮播图动画实现方案

基础实现（基于CSS过渡）

使用Vue的<transition>组件结合CSS实现基础轮播动画：

<template>
  <div class="carousel">
    <transition :name="transitionName">
      <div :key="currentIndex" class="slide">
        <img :src="slides[currentIndex].image" />
      </div>
    </transition>
    <button @click="prev">上一张</button>
    <button @click="next">下一张</button>
  </div>
</template>

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

<style>
.slide-next-enter-active, .slide-next-leave-active,
.slide-prev-enter-active, .slide-prev-leave-active {
  transition: transform 0.5s ease;
}
.slide-next-enter-from {
  transform: translateX(100%);
}
.slide-next-leave-to {
  transform: translateX(-100%);
}
.slide-prev-enter-from {
  transform: translateX(-100%);
}
.slide-prev-leave-to {
  transform: translateX(100%);
}
</style>

使用第三方库（Swiper.js）

集成Swiper.js实现专业级轮播效果：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(slide, index) in slides" :key="index">
        <img :src="slide.image" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/css';

export default {
  data() {
    return {
      slides: [
        { image: 'image1.jpg' },
        { image: 'image2.jpg' }
      ],
      swiper: null
    }
  },
  mounted() {
    this.swiper = new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
      },
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }
}
</script>

自定义动画效果

通过GSAP实现复杂动画：

<template>
  <div ref="carousel" class="carousel">
    <div v-for="(slide, index) in slides" 
         :key="index" 
         :class="{ active: currentIndex === index }"
         class="slide">
      <img :src="slide.image" />
    </div>
  </div>
</template>

<script>
import gsap from 'gsap';

export default {
  data() {
    return {
      currentIndex: 0,
      slides: [
        { image: 'image1.jpg' },
        { image: 'image2.jpg' }
      ]
    }
  },
  methods: {
    animateTo(index) {
      const slides = this.$refs.carousel.querySelectorAll('.slide');
      gsap.to(slides[this.currentIndex], {
        opacity: 0,
        x: -100,
        duration: 0.5
      });
      gsap.fromTo(slides[index], 
        { opacity: 0, x: 100 },
        { opacity: 1, x: 0, duration: 0.5 }
      );
      this.currentIndex = index;
    }
  }
}
</script>

自动轮播实现

添加自动轮播功能：

// 在组件中添加
mounted() {
  this.startAutoPlay();
},
methods: {
  startAutoPlay() {
    this.interval = setInterval(() => {
      this.next();
    }, 3000);
  },
  stopAutoPlay() {
    clearInterval(this.interval);
  }
},
beforeDestroy() {
  this.stopAutoPlay();
}

响应式处理

添加窗口大小变化的响应式处理：

data() {
  return {
    windowWidth: window.innerWidth
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.windowWidth = window.innerWidth;
    // 根据宽度调整轮播参数
  }
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

每种方案可根据实际需求选择或组合使用，CSS过渡适合简单需求，Swiper.js提供开箱即用的专业功能，GSAP适合定制复杂动画效果。