当前位置：首页 > VUE

vue轮播图简单实现

2026-02-22 01:32:20VUE

使用 Vue 实现轮播图

基础结构

创建一个 Vue 组件，包含轮播图的容器、图片列表和导航按钮。以下是一个基础模板：

<template>
  <div class="carousel">
    <div class="carousel-container" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
      <div class="carousel-item" v-for="(item, index) in items" :key="index">
        <img :src="item.image" :alt="item.alt">
      </div>
    </div>
    <button class="carousel-btn prev" @click="prev">&#10094;</button>
    <button class="carousel-btn next" @click="next">&#10095;</button>
  </div>
</template>

数据与逻辑

定义轮播图的数据和切换逻辑：

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

自动轮播

添加自动轮播功能，通过 setInterval 实现：

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

样式设计

使用 CSS 实现轮播图的布局和动画效果：

vue轮播图简单实现

<style>
.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px;
}
.carousel-container {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  min-width: 100%;
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
}
</style>