当前位置：首页 > VUE

vue实现banner

2026-01-08 02:44:30VUE

Vue实现Banner轮播

使用Vue实现Banner轮播可以通过第三方库如swiper或vue-awesome-swiper，也可以手动实现基础轮播效果。以下是两种常见方法：

vue实现banner

使用vue-awesome-swiper

安装依赖：

vue实现banner

npm install swiper vue-awesome-swiper

组件代码示例：

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(item, index) in banners" :key="index">
      <img :src="item.imageUrl" class="banner-img" />
    </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 {
      banners: [
        { imageUrl: 'https://example.com/banner1.jpg' },
        { imageUrl: 'https://example.com/banner2.jpg' }
      ],
      swiperOption: {
        pagination: { el: '.swiper-pagination' },
        loop: true,
        autoplay: { delay: 3000 }
      }
    }
  }
}
</script>

<style>
.banner-img {
  width: 100%;
  height: auto;
}
</style>

手动实现基础轮播

通过Vue指令和定时器实现：

<template>
  <div class="banner-container">
    <div class="banner-wrapper" :style="{ transform: `translateX(${-currentIndex * 100}%)` }">
      <div class="banner-item" v-for="(item, index) in banners" :key="index">
        <img :src="item.imageUrl" />
      </div>
    </div>
    <div class="dots">
      <span 
        v-for="(dot, index) in banners" 
        :key="index" 
        :class="{ active: currentIndex === index }"
        @click="currentIndex = index"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      banners: [
        { imageUrl: 'https://example.com/banner1.jpg' },
        { imageUrl: 'https://example.com/banner2.jpg' }
      ],
      timer: null
    }
  },
  mounted() {
    this.startAutoPlay()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    startAutoPlay() {
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.banners.length
      }, 3000)
    }
  }
}
</script>

<style>
.banner-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 200px;
}
.banner-wrapper {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}
.banner-item {
  flex: 0 0 100%;
  height: 100%;
}
.banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
.dots span.active {
  background: #333;
}
</style>