当前位置：首页 > VUE

vue实现旋转木马轮播

2026-01-22 19:12:54VUE

使用 Vue 实现旋转木马轮播

旋转木马轮播（Carousel）是一种常见的交互式组件，可以通过 Vue 结合 CSS 动画和计算属性实现。以下是具体实现方法：

基础结构搭建

在 Vue 组件中定义轮播数据项和当前激活的索引：

<template>
  <div class="carousel-container">
    <div class="carousel-track" :style="trackStyle">
      <div 
        v-for="(item, index) in items" 
        :key="index"
        class="carousel-item"
        :class="{ 'active': currentIndex === index }"
        :style="getItemStyle(index)"
      >
        {{ item }}
      </div>
    </div>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      currentIndex: 0,
    };
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    },
  },
};
</script>

样式与动画设计

通过 CSS 实现 3D 旋转效果，注意添加透视和变换样式：

.carousel-container {
  perspective: 1000px;
  width: 300px;
  margin: 0 auto;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}

.carousel-item.active {
  background: #42b983;
  color: white;
}

动态计算位置

通过计算属性动态计算轨道和项目的位置：

computed: {
  trackStyle() {
    const angle = 360 / this.items.length;
    const rotateY = -this.currentIndex * angle;
    return {
      transform: `rotateY(${rotateY}deg)`,
    };
  },
},
methods: {
  getItemStyle(index) {
    const angle = 360 / this.items.length;
    const radius = 150; // 根据容器宽度调整
    return {
      transform: `rotateY(${angle * index}deg) translateZ(${radius}px)`,
    };
  },
},

自动轮播功能

添加自动轮播逻辑（可选）：

mounted() {
  this.autoPlay = setInterval(this.next, 3000);
},
beforeDestroy() {
  clearInterval(this.autoPlay);
},

响应式调整

通过监听窗口大小调整半径等参数：

data() {
  return {
    radius: 150,
  };
},
mounted() {
  window.addEventListener('resize', this.handleResize);
  this.handleResize();
},
methods: {
  handleResize() {
    this.radius = Math.min(window.innerWidth * 0.3, 200);
  },
},