轮播图vue怎么实现

使用 Vue 原生实现轮播图

安装 Vue 后，通过 v-for 和动态绑定 class 或 style 实现基础轮播效果。

模板部分

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

脚本部分

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      items: [
        { image: 'image1.jpg', alt: '图片1' },
        { image: 'image2.jpg', alt: '图片2' },
        { image: 'image3.jpg', alt: '图片3' }
      ]
    };
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    }
  }
};
</script>

样式部分

<style>
.carousel {
  overflow: hidden;
  position: relative;
}
.carousel-items {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  flex: 0 0 100%;
}
</style>

使用第三方库（如 Swiper）

Swiper 提供更丰富的功能（如自动播放、分页器）。

安装 Swiper

npm install swiper vue-awesome-swiper

组件实现

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in items" :key="index">
      <img :src="item.image" :alt="item.alt">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      items: [
        { image: 'image1.jpg', alt: '图片1' },
        { image: 'image2.jpg', alt: '图片2' },
        { image: 'image3.jpg', alt: '图片3' }
      ],
      swiperOptions: {
        pagination: { el: '.swiper-pagination' },
        loop: true,
        autoplay: { delay: 3000 }
      }
    };
  }
};
</script>

自动播放与动画优化

通过 setInterval 实现自动轮播，并添加过渡动画。

脚本扩展

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

CSS 动画增强

.carousel-items {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

响应式设计

通过监听窗口大小动态调整轮播图尺寸。

脚本扩展

data() {
  return {
    windowWidth: window.innerWidth
  };
},
created() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.windowWidth = window.innerWidth;
  }
}

模板调整

<div class="carousel" :style="{ height: windowWidth > 768 ? '400px' : '200px' }">
  <!-- 内容 -->
</div>