vue实现轮播图详解

vue实现轮播图详解

1 引言

在互联网日渐内卷的情况下，越来越注重用户体验，轮播图的应用场景越来越 广泛，如应用于以下场景

• 商品详情页 。在商品详情页中展示足够的商品信息，可以将轮播图比作一个团队，每个团队成员都有自己的工作，例如首图负责吸引流量，其余的负责商品的卖点、促销信息、购物保障等等。
• 商品卖点展示 。在轮播图中靠前位置展示买家最看重的商品卖点，可以减少买家的购买决策时长。例如，如果商品在做促销活动或者小赠品时，就可以把活动或者礼品图放在靠前的轮播图上。
• 首页重点场景突出。如重点产品、常用功能入口，热门活动等场景。

同时，市场上的轮播图组件功能也越来越成熟，以下我们就介绍目前常见的实现轮播图的方式。实现效果如下：
vant示例：

自实现：

2 vue实现轮播图

2.1 Vant组件引入

vant组件适用于移动端项目，目前项目开源，是市面上做的比较好的开源项目，功能比较强大，我们先介绍vant实现轮播图效果。对于pc端实现轮播图，市场上也有成熟的组件，如Swipe。

2.1.1 vant组件引入

Vant组件安装引入以及配置在前面我们已经做过介绍，请产找以往链接：

• vue2：vue2引入vant组件
• vue3：vue3引入vant组件

2.2.2 使用van-swipe组件

van-swipe组件和van-swipe-item组件配合使用，原始代码如下：

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">
            <van-swipe-item>vant-swipevan-swipe-item>
            <van-swipe-item class="dif">2van-swipe-item>
            <van-swipe-item>3van-swipe-item>
            <van-swipe-item>4van-swipe-item>
        van-swipe>

可实现如下动画效果：

若是想进行图片轮播，vant组件还提供了懒加载选项，以解决图片加载过慢卡顿问题，代码如下：

<van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" />
  van-swipe-item>
van-swipe>

其次，除了以上功能以外，还可以进行自定义滑块大小和改变轮播方向等操作，这里不做一一介绍，详情请见官网：

vue3中vant轮播图使用。

2.2 vue代码实现

“鱼”和”渔“相差还是比较大的，除了借助市场组件以外，还可以自己按照需求开发轮播图，以下我们详细介绍一下自己实现轮播图的思路与实现步骤，最后附上我们实现的代码以供参考。

2.2.1 功能需求

1. 实现图片轮播；
2. 轮播图切换流畅；
3. 可自动轮播和手动触发。

2.2.2 实现思路

1. 将需要轮播的图片进行排列；
2. 添加手动切换按钮。
3. 图片切换之间添加动画效果；
4. 添加切换逻辑，将排列好的图片进行切换；

2.2.3 代码实现

实现思路代码以及相关注释如下：

<template>
  <div class="carousel">
    <div @click="prevSlide" class="carousel-prev-icon-left">div>
    <div class="carousel-slides">
      <img
        v-for="(image, index) in images"
        :key="index"
        :src="image"
        :style="{left: index * 100 + '%', 'transform': dynamicstyle}"
        alt="暂无图片"
      />
    div>
    <div @click="nextSlide" class="carousel-prev-icon-right">div>
  div>
template>
<script>
export default {
  data() {
    return {
      images: [
        '/src/assets/img/sakuraTree01.jpeg',
        '/src/assets/img/starrySky.jpg',
        '/src/assets/img/starrySky02.jpg'
        // ... 更多图片
      ],
      dynamicstyle: "", //动态样式
      currentSlide: 0, //播放序号
      interval: Object,
    }
  },
  mounted() {
    // 自动播放动画
    this.startSlideshow()
  },
  methods: {
    nextSlide() {
      // 每次指针加一
      this.currentSlide = (this.currentSlide + 1) % this.images.length
      this.setStyle();
    },
    prevSlide() {
      // 每次减一，为负数时循环
      this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
      this.setStyle();
    },
    // 图片动画
    setStyle() {
      this.dynamicstyle = `translatex(-${this.currentSlide*100}%)`
    },
    // 定时器
    startSlideshow() {
      this.interval = setInterval(() => {
        this.currentSlide = (this.currentSlide + 1) % this.images.length;
        this.setStyle();
      }, 3000)
    },
    stopSlideshow() {
      clearInterval(this.interval)
    }
  }
}
script>
<style scoped>
.carousel {
  position: relative;
}
.carousel-slides {
  position: relative;
  width: 320px;
  height: 173px;
  overflow: hidden;
}
.carousel-slides img {
  display: inline-block;
  position: absolute;
  width: inherit;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  height: 100%;
  transition: 0.5s transform ease-in-out;
}
.carousel-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.carousel-prev-icon-left {
  position: absolute;
  left: 10px;
  top: 55px;
  height: 50px;
  width: 40px;
  border: none;
  background-image: url(../../../assets/img/arrow-l.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
}
.carousel-prev-icon-right {
  position: absolute;
  right: 10px;
  top: 55px;
  height: 50px;
  width: 40px;
  border: none;
  background-image: url('../../../assets/img/arrow-r.png/');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
}
style>

以上代码样式部分还可以进行精简，仅供学习参考，商业项目需要进行调试修改，思路可供参考。

需要注意以下几点：

1. 图片需要使用绝对定位；
2. 动态样式的使用比较灵活；
3. 使用动画平移要注意平移单位；

2.2.4 实现效果

实现效果动图如下：

3 总结

实现轮播图的方式方法比较多，但用户体验比较好的不多，查了市面上实现较好的就是使用动画进行位置切换，有限推荐使用市面上比较成熟的组件，如果商业化的话，建议还是自己写，避免版权纠纷。以上是介绍的vue实现轮播图的方法，还有纯html+css+js实现的，与vue相比，需要进行频繁的dom操作，代码篇幅较长。若想要代码请在评论区留言。

引用：vant官网