当前位置：首页 > VUE

vue原生实现无缝轮播

2026-01-22 06:47:48VUE

Vue 原生实现无缝轮播

无缝轮播的核心在于通过动态调整元素位置和克隆节点，实现视觉上的无限循环效果。以下是基于 Vue 3 的实现方法：

核心思路

使用 transform: translateX 控制轮播位移
首尾添加克隆节点保证无缝过渡
通过 requestAnimationFrame 实现平滑动画

模板结构

<template>
  <div class="carousel-container" @mouseenter="pause" @mouseleave="resume">
    <div class="carousel-track" :style="trackStyle">
      <div 
        v-for="(item, index) in clonedItems" 
        :key="index"
        class="carousel-item"
      >
        <img :src="item.image" :alt="item.title">
      </div>
    </div>
    <button @click="prev">Previous</button>
    <button @click="next">Next</button>
  </div>
</template>

数据与样式

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  interval: {
    type: Number,
    default: 3000
  }
})

const currentIndex = ref(1)
const transitionDuration = ref(500)
const isTransitioning = ref(false)
let timer = null

// 克隆首尾节点
const clonedItems = computed(() => [
  props.items[props.items.length - 1],
  ...props.items,
  props.items[0]
])

// 计算轨道位移
const trackStyle = computed(() => ({
  transform: `translateX(-${currentIndex.value * 100}%)`,
  transition: isTransitioning.value ? 
    `transform ${transitionDuration.value}ms ease` : 'none'
}))
</script>

核心方法

function next() {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentIndex.value++

  setTimeout(() => {
    if (currentIndex.value >= clonedItems.value.length - 1) {
      isTransitioning.value = false
      currentIndex.value = 1
    }
  }, transitionDuration.value)
}

function prev() {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentIndex.value--

  setTimeout(() => {
    if (currentIndex.value <= 0) {
      isTransitioning.value = false
      currentIndex.value = clonedItems.value.length - 2
    }
  }, transitionDuration.value)
}

function startAutoPlay() {
  timer = setInterval(next, props.interval)
}

function pause() {
  clearInterval(timer)
}

function resume() {
  startAutoPlay()
}

生命周期

onMounted(() => {
  startAutoPlay()
})

onBeforeUnmount(() => {
  clearInterval(timer)
})

样式部分

.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  width: 100%;
}

.carousel-item {
  flex: 0 0 100%;
  min-width: 100%;
}