vue实现无限轮播图

实现思路

无限轮播图的核心在于动态调整数据列表，当滑动到边界时无缝切换到另一侧。Vue的响应式特性结合CSS过渡效果可高效实现这一功能。

基础结构

<template>
  <div class="carousel-container">
    <div 
      class="carousel-track" 
      :style="{ transform: `translateX(${-currentIndex * 100}%)` }"
    >
      <div 
        v-for="(item, index) in items" 
        :key="index" 
        class="slide"
      >
        <img :src="item.image" :alt="item.title">
      </div>
    </div>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

核心逻辑

<script>
export default {
  data() {
    return {
      items: [
        { image: '1.jpg', title: 'Slide 1' },
        { image: '2.jpg', title: 'Slide 2' },
        { image: '3.jpg', title: 'Slide 3' }
      ],
      currentIndex: 0,
      timer: null
    }
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length;
    },
    startAutoPlay() {
      this.timer = setInterval(this.next, 3000);
    }
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

无限循环优化

在首尾添加克隆项实现无缝过渡：

computed: {
  extendedItems() {
    return [
      this.items[this.items.length - 1],
      ...this.items,
      this.items[0]
    ];
  }
}

CSS过渡效果

.carousel-container {
  overflow: hidden;
  position: relative;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  flex: 0 0 100%;
  min-width: 100%;
}

触摸支持

添加touch事件处理：

methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
  },
  handleTouchMove(e) {
    this.moveX = e.touches[0].clientX;
  },
  handleTouchEnd() {
    if (this.moveX - this.startX > 50) {
      this.prev();
    } else if (this.startX - this.moveX > 50) {
      this.next();
    }
  }
}

性能优化

使用will-change提升渲染性能：

.carousel-track {
  will-change: transform;
}

注意事项

• 克隆项需设置单独的key避免Vue复用DOM
• 移动端需添加touch-action: pan-y防止默认滚动行为
• 过渡动画结束后需立即重置位置（通过watch监听currentIndex）