Vue轮播图

He_wc

已于 2023-09-07 18:13:47 修改

阅读量779

点赞数 3

分类专栏： Vue 学习文章标签：前端 javascript html

于 2023-09-03 08:30:00 首次发布

本文链接：https://blog.csdn.net/he_9a9/article/details/132638244

版权

Vue 学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

写轮播图需要知道的逻辑：

了解轮播图的原理和功能：轮播图是一种在网页中常见的图像展示方式，它可以让用户通过点击或滑动来查看不同的图像。了解轮播图的原理和功能有助于你更好地设计和实现轮播图。
了解HTML和CSS的基本知识：轮播图的实现需要使用HTML和CSS。HTML用于构建页面结构，CSS用于设置页面的样式。你需要了解基本的HTML标签和CSS样式，以便能够创建和美化轮播图。
了解JavaScript的基本知识：轮播图通常需要使用JavaScript来实现自动播放、切换和交互等功能。你需要了解基本的JavaScript语法和事件处理机制，以便能够编写控制轮播图的代码。
了解响应式设计的基本知识：轮播图应该适应不同的屏幕尺寸和设备类型，以便在不同大小的屏幕上呈现良好的效果。你需要了解响应式设计的基本原理，以便能够创建自适应的轮播图。
了解常见的轮播图库和插件：有许多现成的轮播图库和插件可以帮助你快速创建轮播图。了解这些库和插件的优缺点，并选择适合你的需求的那个。

下面提供两种方法（仅供参考）

方法一：手写

html部分：

<div class="carousel">
    <div
      class="slide"
      v-for="(image, index) in images"
      :key="index"
      :class="{ active: currentIndex === index }"
    >
      <img :src="image" />
    </div>
    <button class="prev-button" @click="prevSlide">上一个</button>
    <button class="next-button" @click="nextSlide">下一个</button>
  </div>

style部分:

.carousel {
  position: relative;
  height: 300px;
}
.slide {
  display: none;
  margin-top: 50px;
  height: 200px;
}
.slide img{
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.slide.active {
  display: block;
}
.prev-button {
  position: absolute;
}
.next-button {
  position: absolute;
  right: 0;
}

js部分：

 data() {
    return {
      images: [
        require("../assets/img/about.png"),
        require("../assets/img/about-us.png"),
        require("../assets/img/badge1.png"),
        require("../assets/img/badge2.png"),
      ],
      currentIndex: 0,
    };
  },
 
  created() {
    this.startCarousel();
  },
  methods: {
    startCarousel() {
      setInterval(() => {
        //计算新的索引值并对数组this.images的长度取余数
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 4000);
    },
    prevSlide() {
      this.currentIndex--;
      if (this.currentIndex < 0) {
        //设置为最后一个元素的索引
        this.currentIndex = this.images.length - 1;
      }
    },
    nextSlide() {
      this.currentIndex++;
      //重置为第一个元素的索引
      if (this.currentIndex >= this.images.length) {
        this.currentIndex = 0;
      }
    },
  },

方法二：利用插件

在Vue中，可以使用Vue-awesome-swiper插件来编写轮播图。以下是一个简单的例子：

1.安装Vue-awesome-swiper插件：

npm install vue-awesome-swiper --save

2.在Vue组件中导入Swiper和SwiperSlide组件：

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

3.在组件中使用Swiper和SwiperSlide组件：

<template>
  <div class="slider-container">
    <Swiper :options="swiperOption">
      <SwiperSlide>
        <img src="图片地址">
      </SwiperSlide>
      <SwiperSlide>
        <img src="图片地址">
      </SwiperSlide>
      <SwiperSlide>
        <img src="图片地址">
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script>
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
        },
        pagination: {
          el: '.swiper-pagination',
        },
      },
    }
  },
}
</script>

<style>
  .slider-container {
    width: 100%;
    height: 400px;
  }
</style>

在上面的例子中，Swiper组件包含三个SwiperSlide组件，分别是轮播图的三个部分。我们可以在Swiper的options中设置轮播图的参数，例如循环轮播、自动播放、分页器等。最后，使用CSS样式定义轮播图容器的宽度和高度。

这就是一个简单的使用Vue-awesome-swiper编写轮播图的例子。当然，还有其他的Vue轮播插件可供选择，您也可以根据自己的需要进行选择。

以上两种方法是自己总结出来，需要补充的请评论区留言！