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>
1
2
3
4
5
6

可实现如下动画效果：

若是想进行图片轮播，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>
1
2
3
4
5

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

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
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

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

需要注意以下几点：

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

2.2.4 实现效果

实现效果动图如下：

3 总结

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

引用：vant官网