vue 轮播图原生

以下是一个基本的 Vue 轮播图实现：

1. 在 Vue 组件中声明一个数组，用于存放图片路径和标题等信息：

data() {
  return {
    images: [
      {
        src: 'https://picsum.photos/800/300?image=0',
        title: 'Image 1'
      },
      {
        src: 'https://picsum.photos/800/300?image=1',
        title: 'Image 2'
      },
      {
        src: 'https://picsum.photos/800/300?image=2',
        title: 'Image 3'
      }
    ],
    currentIndex: 0
  }
}

1. 使用 v-for 循环遍历图片数组，生成轮播图的图片和标题：

<template>
  <div class="carousel">
    <div class="slider">
      <div 
        v-for="(image, index) in images" 
        :key="index" 
        :class="{active: index === currentIndex}"
        class="slide"
        :style="{backgroundImage: `url(${image.src})`}">
        <h2>{
   
   {image.title}}</h2>
      </div>
    </div>
  </div>
</template>

1. 实现点击上一张和下一张按钮的功能，用 currentIndex 控制当前显示的图片：

methods: {
  prev() {
    if (this.currentIndex === 0) {
      this.currentIndex = this.images.length - 1;
    } else {
      this.currentIndex--;
    }
  },
  next() {
    if (this.currentIndex === this.images.length - 1) {
      this.currentIndex = 0;
    } else {
      this.currentIndex++;
    }
  }
}

1. 在模板中添加上一张和下一张按钮，绑定点击事件：

<template>
  <div class="carousel">
    <div class="slider">
      <div 
        v-for="(image, index) in images" 
        :key="index" 
        :class="{active: index === currentIndex}"
        class="slide"
        :style="{backgroundImage: `url(${image.src})`}">
        <h2>{
   
   {image.title}}</h2>
      </div>
    </div>
    <div class="controls">
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

完整代码如下：

<template>
  <div class="carousel">
    <div class="slider">
      <div 
        v-for="(image, index) in images" 
        :key="index" 
        :class="{active: index === currentIndex}"
        class="slide"
        :style="{backgroundImage: `url(${image.src})`}">
        <h2>{
   
   {image.title}}</h2>
      </div>
    </div>
    <div class="controls">
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          src: 'https://picsum.photos/800/300?image=0',
          title: 'Image 1'
        },
        {
          src: 'https://picsum.photos/800/300?image=1',
          title: 'Image 2'
        },
        {
          src: 'https://picsum.photos/800/300?image=2',
          title: 'Image 3'
        }
      ],
      currentIndex: 0
    }
  },
  methods: {
    prev() {
      if (this.currentIndex === 0) {
        this.currentIndex = this.images.length - 1;
      } else {
        this.currentIndex--;
      }
    },
    next() {
      if (this.currentIndex === this.images.length - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex++;
      }
    }
  }
}
</script>

<style>
.carousel {
  position: relative;
  width: 800px;
  height: 300px;
}

.slider {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

h2 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 24px;
}

.controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

button {
  margin-left: 10px;
}
</style>