当前位置：首页 > VUE

vue实现旋转木马轮播

2026-02-23 09:59:34VUE

Vue实现旋转木马轮播

旋转木马轮播（Carousel）是一种常见的UI效果，通过Vue可以结合CSS动画和组件逻辑实现。以下是两种典型实现方式：

基于CSS Transform的轮播

核心思路是通过transform属性动态计算元素的位置和旋转角度，结合Vue的响应式数据控制动画。

模板部分

vue实现旋转木马轮播

<template>
  <div class="carousel-container">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      :style="getItemStyle(index)"
      class="carousel-item"
    >
      {{ item }}
    </div>
  </div>
</template>

逻辑部分

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      currentIndex: 0,
      itemCount: 5,
      radius: 150 // 旋转半径
    }
  },
  methods: {
    getItemStyle(index) {
      const angle = (360 / this.itemCount) * index - this.currentIndex * (360 / this.itemCount);
      const radian = angle * (Math.PI / 180);
      return {
        transform: `
          rotateY(${angle}deg) 
          translateZ(${this.radius}px)
          rotateY(${-angle}deg)
        `,
        opacity: angle === 0 ? 1 : 0.6
      };
    },
    rotate() {
      this.currentIndex = (this.currentIndex + 1) % this.itemCount;
    }
  },
  mounted() {
    setInterval(this.rotate, 3000);
  }
}
</script>

样式部分

vue实现旋转木马轮播

<style scoped>
.carousel-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}
.carousel-item {
  position: absolute;
  transition: transform 1s, opacity 0.5s;
}
</style>

使用第三方库（如Swiper）

对于更复杂的场景，推荐使用成熟的轮播库如Swiper.js，其内置3D旋转木马效果。

安装Swiper

npm install swiper@8

组件实现

<template>
  <swiper
    :effect="'cube'"
    :grabCursor="true"
    :loop="true"
    :autoplay="{ delay: 3000 }"
    class="mySwiper"
  >
    <swiper-slide v-for="item in items" :key="item">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/effect-cube';

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      items: ['Slide 1', 'Slide 2', 'Slide 3']
    }
  }
}
</script>