vue 轮播图原生

2023-12-13 04:54:28

以下是一个基本的 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>

文章来源:https://blog.csdn.net/song19990524/article/details/134866042
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。