实现图片轮播的主要思路总结：
1、将多张图片水平或者垂直方向衔接排好，沿着某一个方式移动，父元素设置固定的大小，溢出的内容进行隐藏
2，通过position条件下：z-index的覆盖显示。
3、改变透明度实现图片轮播
基于上面的思路，下面是五种实现的方式：
方式一：vue + swiper 实现图片轮播
1、安装swiper
npm install swiper
2、在组件中引用swiper
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
3、实例代码：
1
2
17
18
19
58
59
60
方式二：jQuery实现轮播图
1
2
3
4
5
6
73
74
75
76
77
78 .jpg)
79 .jpg)
80 .jpg)
81 .jpg)
82 .jpg)
83 .jpg)
84 .jpg)
85 .jpg)
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
150
151
方式三：改变透明度实现图片轮播
将所有要轮播的图片全部定位到一起，即一层一层摞起来，并且利用层级的属性调整正确的图片顺序，将图片的透明度全部设置为0，然后在让初始的第一张图片的透明度为1即可，具体代码如下：
1
2
3
4
5
6
45
46
47
48 
49 
50 
51 
52 
53
- 1
- 2
- 3
- 4
- 5
54
55
56
57
58
59
60
61
117
118
方法四：利用层级的高低来使最顶部图片变化的做法，这个做法也没有位移的动作，每次改变图片z-index的值来控制轮播，有一点问题就是，方向可能不好控制。
代码：
1
2
3
4
5
6
31
32
33
34
35
36
37
38
39
40
41
42
92
方式五：将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。
1
2
3
4
5
6
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
106
107
108
109 <
110
111
112 >
113
114
115
116
117
118
239
240