用Vue实现一个简单的图片轮播
本文已收录至//github.com/likekk/studyBlog欢迎大家star，共同学习，共同进步。如果文章有错误的地方，欢迎大家指出。后期将在将GitHub上规划前端学习的路线和资源分享。
写在前面
每一篇文章都希望您有所收获，每一篇文章都希望您能静下心来浏览、阅读。每一篇文章都是作者精心打磨的作品。
如果您觉得杨戬这个小白还有点东西的话，杨戬希望正在看文章的您可以帮忙点亮那个点赞的按钮(效果更加)，对于杨戬这个暖男来说，真的真的非常重要，这将是我持续写作的动力。
前言
写这篇文章的目的主要是将以前所学的知识结合起来，进一步巩固一下自己的记忆，防止遗忘(主要是害怕老年痴呆)，当然更重要的是学以致用，毕竟学过的东西不拿来用的话就会很容易忘记，永远不要太相信自己的记忆，编程这东西，几天不弄，忘的就很快，回过头再看，心里想着：这是我写的代码吗？本篇博客也是秉着这样的初心去写的。
整体分析
在我看来，我觉得做每一件事情都必须弄清楚这件事情的前因后果，当然了如果有是实在不太了解的，姑且可以先实现效果。
然后再返回去慢慢理解，不过我一般比较喜欢先分析整体结构，然后一步一步去实现，有些事情不可能做到尽善尽美的，不是吗？先上效果图吧！
这张图打了一波广告，我想你们应该不会介意的吧！不过说实话这里面的老师讲课真的是特别优秀，感兴趣的读者可以去尝试一下，毕竟暖男戬是不会骗人的。
本来想着弄一下轮播图的动态效果的，奈何不会弄，所以放弃了，静态的凑合看吧！
分析第一步
布局的话，一个是显示图片，另一个是显示小圆点，图片切换的时候，小圆点也随着切换，当切换到最后一张的时候图片重从第一张开始重新轮播。
分析第二步
我们需要明确哪些数据是需要通过外部传输，哪些数据是我们自己可以控制，从效果图分析主要的话是图片，当然控制小圆点也是可以的，我们知道vue是可以实现组件的复用的，那么对于轮播图而言，也可以实现其复用性。
例如：在其它地方我们也需要用到轮播图，但是轮播的图片不一样，轮播的速度不一样等等。
总结：分析哪些数据是可控的，哪些数据是不可控的。
分析第三步
这里主要是轮播整体的实现，鼠标经过，轮播停止，鼠标移出，轮播继续，点击小圆点，实现轮播。
涉及知识点
文章中轮播图的实现涉及的知识点我整理了一下，如果有知识点不太清楚的读者可以去了解相关的内容。
- vue的父子组件通信
- 静态资源的导入
- v-if和v-for的使用
- 事件处理
- class和sytle绑定
- Vue的生命周期
- 组件的校验
轮播的实现
将步骤分析和涉及的知识点整理之后，一切应该都是游刃有余吧！那么我们一步一步实现轮播的效果。
界面布局
1、全局css样式引入
全局css样式，我已经会搭建准备好了，一个是reset.css，一个是global.css，静态图片资源放在了github上，大家可以自行下载
reset.css
1/* //meyerweb.com/eric/tools/css/reset/
2 v2.0 | 20110126
3 License: none (public domain)
4*/
5
6html,
7body,
8div,
9span,
10applet,
11object,
12iframe,
13h1,
14h2,
15h3,
16h4,
17h5,
18h6,
19p,
20blockquote,
21pre,
22a,
23abbr,
24acronym,
25address,
26big,
27cite,
28code,
29del,
30dfn,
31em,
32img,
33ins,
34kbd,
35q,
36s,
37samp,
38small,
39strike,
40strong,
41sub,
42sup,
43tt,
44var,
45b,
46u,
47i,
48center,
49dl,
50dt,
51dd,
52ol,
53ul,
54li,
55fieldset,
56form,
57label,
58legend,
59table,
60caption,
61tbody,
62tfoot,
63thead,
64tr,
65th,
66td,
67article,
68aside,
69canvas,
70details,
71embed,
72figure,
73figcaption,
74footer,
75header,
76hgroup,
77menu,
78nav,
79output,
80ruby,
81section,
82summary,
83time,
84mark,
85audio,
86video {
87 margin: 0;
88 padding: 0;
89 border: 0;
90 font-size: 100%;
91 font: inherit;
92 vertical-align: baseline;
93}
94/* HTML5 display-role reset for older browsers */
95article,
96aside,
97details,
98figcaption,
99figure,
100footer,
101header,
102hgroup,
103menu,
104nav,
105section {
106 display: block;
107}
108body {
109 line-height: 1;
110}
111ol,
112ul {
113 list-style: none;
114}
115blockquote,
116q {
117 quotes: none;
118}
119blockquote:before,
120blockquote:after,
121q:before,
122q:after {
123 content: "";
124 content: none;
125}
126table {
127 border-collapse: collapse;
128 border-spacing: 0;
129}
global.css
1@import "//at.alicdn.com/t/font_1811699_2hvkwp7upcz.css";
2
3a {
4 color: #409eff;
5 text-decoration: none;
6}
7a:hover{
8 color: #66b1ff;
9}
10* {
11 box-sizing: border-box;
12}
13
14.container {
15 width: 1080px;
16 margin: 0 auto;
17}
18
19input {
20 background-color: #fff;
21 background-image: none;
22 border-radius: 4px;
23 border: 1px solid #dcdfe6;
24 color: #606266;
25 display: inline-block;
26 font-size: inherit;
27 height: 40px;
28 line-height: 40px;
29 outline: none;
30 padding: 0 15px;
31 transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
32}
33input:focus {
34 outline: none;
35 border-color: #409eff;
36}
37
38body {
39 min-width: 1100px;
40 line-height: 1.5;
41 color: #333;
42}
43
44button {
45 outline: none;
46 border: none;
47 width: 170px;
48 font-size: inherit;
49 color: #fff;
50 background-color: #409eff;
51 border-color: #409eff;
52 line-height: 1;
53 white-space: nowrap;
54 cursor: pointer;
55 transition: 0.1s;
56 font-weight: 500;
57 font-size: 14px;
58 border-radius: 4px;
59 padding: 12px;
60}
61button:hover {
62 background: #66b1ff;
63 border-color: #66b1ff;
64}
全局导入
main.js
1// The Vue build version to load with the `import` command
2// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3import Vue from 'vue'
4import "./assets/css/reset.css"
5import "./assets/css/global.css"
6import router from './router'
7import store from "./store/index"
8import Vuex from "vuex"
9Vue.use(Vuex)
10Vue.config.productionTip = false
11
12/* eslint-disable no-new */
13new Vue({
14 el: '#app',
15 router,
16 store,
17 components: {},
18 template: ''
19})
2、在components/slider文件夹下新建Slider.vue和sliderIndex.vue这两个组件
Slider.vue
1<template>
2 <div class="banner-container">
3 <ul class="images">
4 <li><a href=""><img src="../../assets/img/banner/banner1.jpeg" alt=""></a></li>
5 <li><a href=""><img src="../../assets/img/banner/banner2.jpeg" alt=""></a></li>
6 <li><a href=""><img src="../../assets/img/banner/banner3.jpeg" alt=""></a></li>
7 </ul>
8 <ul class="dots">
9 <li class="active"></li>
10 <li></li>
11 <li></li>
12 </ul>
13 </div>
14</template>
15
16<script>
17 export default {
18 name: "Slider",
19 }
20</script>
21
22<style scoped>
23 /* 样式 */
24 .banner-container {
25 height: 350px;
26 position: relative;
27 overflow: hidden;
28 }
29 .banner-container li {
30 display: block;
31 width: 1080px;
32 height: 100%;
33 float: left;
34 }
35 .images {
36 height: 100%;
37 transition: 0.5s;
38 }
39 .banner-container img {
40 width: 1080px;
41 height: 100%;
42 }
43 .dots {
44 position: absolute;
45 bottom: 10px;
46 right: 10px;
47 display: flex;
48 }
49 .dots li {
50 width: 10px;
51 cursor: pointer;
52 height: 10px;
53 margin: 0 3px;
54 border-radius: 50%;
55 border: 1px solid;
56 color: #fff;
57 }
58 .dots li.active {
59 background: #fff;
60 }
61</style>
SliderIndex.vue
1<template>
2 <div style="width:1080px;margin: 0 auto ">
3 <slider></slider>
4 </div>
5</template>
6<script>
7 import slider from "./Slider"
8 export default {
9 name: "SliderIndex",
10 components:{
11 slider:slider
12 },
13 }
14</script>
15
16<style scoped>
17
18</style>
这样，整体的布局效果就已经出来了。这里就不进行截图了。
组件通信和静态资源导入
在Slider.vue这个组件中，我们是将图片直接写死的，上面分析也提到过，哪些数据是可控的，哪些数据是不可控的，图片的话，我们动态引入。
资源导入
资源导入有两种方式，一种是import，另一种是require导入。
- import 导入
1 import banner1 from "../../assets/img/banner/banner1.jpeg"
2 import banner2 from "../../assets/img/banner/banner2.jpeg"
3 import banner3 from "../../assets/img/banner/banner3.jpeg"
- require导入
1require("./../../assets/img/banner/banner1.jpeg")
2require("./../../assets/img/banner/banner2.jpeg")
3require("./../../assets/img/banner/banner3.jpeg")
这两种方式都可以，
SliderIndex.vue
1<template>
2 <div style="width:1080px;margin: 0 auto ">
3 <slider :sliderArray="sliderArray"></slider>
4 </div>
5</template>
6<script>
7 import slider from "./Slider"
8 import banner1 from "../../assets/img/banner/banner1.jpeg"
9 import banner2 from "../../assets/img/banner/banner2.jpeg"
10 import banner3 from "../../assets/img/banner/banner3.jpeg"
11 export default {
12 name: "SliderIndex",
13 components:{
14 slider:slider
15 },
16 data(){
17 return{
18 sliderArray:[banner1,banner2,banner3]
19 }
20 }
21 }
22</script>
23
24<style scoped>
25
26</style>
Slide.vue
1<template>
2 <div class="banner-container">
3 <ul class="images">
4 <li v-for="(item,i) of sliderArray" :key="i">
5 <a href="javascript:void(0)"><img :src=item alt=""></a>
6 </li>
7 </ul>
8 <ul class="dots">
9 <li v-for="(item,i) of sliderArray" :key='i'></li>
10 </ul>
11 </div>
12</template>
13
14<script>
15 export default {
16 name: "Slider",
17 props:{
18 sliderArray:{
19 require:true,
20 type:Array,
21 }
22 }
23 }
24</script>
25
26<style scoped>
27 /* 样式 */
28 .banner-container {
29 height: 350px;
30 position: relative;
31 overflow: hidden;
32 }
33 .banner-container li {
34 display: block;
35 width: 1080px;
36 height: 100%;
37 float: left;
38 }
39 .images {
40 height: 100%;
41 transition: 0.5s;
42 }
43 .banner-container img {
44 width: 1080px;
45 height: 100%;
46 }
47 .dots {
48 position: absolute;
49 bottom: 10px;
50 right: 10px;
51 display: flex;
52 }
53 .dots li {
54 width: 10px;
55 cursor: pointer;
56 height: 10px;
57 margin: 0 3px;
58 border-radius: 50%;
59 border: 1px solid;
60 color: #fff;
61 }
62 .dots li.active {
63 background: #fff;
64 }
65</style>
到这一步的时候，有几个问题，第一个是默认我们图片显示第一张，小圆点默认第一个显示，容器的总宽度计算是总图片的长度*100%，Slide.vue定义内部数据index=0，当index和i相等时，添加active类
1<template>
2 <div class="banner-container">
3 <ul class="images" :style="{
4 width:sliderArray.length*100+'%',
5 marginLeft:-index*100+'%'
6 }">
7 <li v-for="(item,i) of sliderArray" :key="i">
8 <a href="javascript:void(0)"><img :src=item alt=""></a>
9 </li>
10 </ul>
11 <ul class="dots">
12 <li v-for="(item,i) of sliderArray" :class="{
13 active:i===index
14 }" :key="i"></li>
15 </ul>
16 </div>
17</template>
18
19<script>
20 export default {
21 name: "Slider",
22 props:{
23 sliderArray:{
24 require:true,
25 type:Array,
26 }
27 },
28 data(){
29 return{
30 index:0,
31 }
32 }
33 }
34</script>
35
36<style scoped>
37 /* 样式 */
38 .banner-container {
39 height: 350px;
40 position: relative;
41 overflow: hidden;
42 }
43 .banner-container li {
44 display: block;
45 width: 1080px;
46 height: 100%;
47 float: left;
48 }
49 .images {
50 height: 100%;
51 transition: 0.5s;
52 }
53 .banner-container img {
54 width: 1080px;
55 height: 100%;
56 }
57 .dots {
58 position: absolute;
59 bottom: 10px;
60 right: 10px;
61 display: flex;
62 }
63 .dots li {
64 width: 10px;
65 cursor: pointer;
66 height: 10px;
67 margin: 0 3px;
68 border-radius: 50%;
69 border: 1px solid;
70 color: #fff;
71 }
72 .dots li.active {
73 background: #fff;
74 }
75</style>
这时，可以实现基本的轮播效果，在这里我们无需关注视图，只需要关注数据即可，因为数据改变了，视图之然就变了，可以用控制台改变index的值。
小圆点切换时，图片切换
这个功能的实现特别简单，只需要在点击的时候将i的值赋值给index即可，即index改变，视图重新渲染。
1 <ul class="dots">
2 <li v-for="(item,i) of sliderArray" :class="{
3 active:i===index
4 }" :key="i" @click="index=i"></li>
5 </ul>
自动轮播和停止轮播
实现自动轮播的关键是在组件挂载时调用方法，停止轮播的关键是组件销毁时，销毁定时器。
鼠标悬停，轮播停止。鼠标离开，录播继续。
1<template>
2 <div class="banner-container">
3 <ul class="images" :style="{
4 width:sliderArray.length*100+'%',
5 marginLeft:-index*100+'%'
6 }">
7 <li v-for="(item,i) of sliderArray" :key="i" @mouseleave="autoStart" @mouseenter="autoStop">
8 <a href="javascript:void(0)"><img :src=item alt=""></a>
9 </li>
10 </ul>
11 <ul class="dots">
12 <li v-for="(item,i) of sliderArray" :class="{
13 active:i===index
14 }" :key="i" @click="index=i"></li>
15 </ul>
16 </div>
17</template>
18
19<script>
20 export default {
21 name: "Slider",
22 props:{
23 sliderArray:{
24 require:true,
25 type:Array,
26 }
27 },
28 data(){
29 return{
30 index:0,
31 timer:null
32 }
33 },
34 mounted(){
35 this.autoStart()
36 },
37 destroyed(){
38 this.autoStop()
39 },
40 methods:{
41 autoStart(){
42 if(this.timer){
43 return
44 }
45 this.timer=setInterval(()=>{
46 this.index=(this.index+1)%this.sliderArray.length;
47 },2000)
48 },
49 autoStop(){
50 clearInterval(this.timer);
51 this.timer=null;
52 }
53 }
54 }
55</script>
56
57<style scoped>
58 /* 样式 */
59 .banner-container {
60 height: 350px;
61 position: relative;
62 overflow: hidden;
63 }
64 .banner-container li {
65 display: block;
66 width: 1080px;
67 height: 100%;
68 float: left;
69 }
70 .images {
71 height: 100%;
72 transition: 0.5s;
73 }
74 .banner-container img {
75 width: 1080px;
76 height: 100%;
77 }
78 .dots {
79 position: absolute;
80 bottom: 10px;
81 right: 10px;
82 display: flex;
83 }
84 .dots li {
85 width: 10px;
86 cursor: pointer;
87 height: 10px;
88 margin: 0 3px;
89 border-radius: 50%;
90 border: 1px solid;
91 color: #fff;
92 }
93 .dots li.active {
94 background: #fff;
95 }
96</style>
简单的轮播效果就已经实现了，整体难度不难，但是涉及的知识点比较多，从一个小的轮播效果就涉及那么多的知识点，所以说基础很重要，杨戬的基础也不是很好，但是杨戬是一个喜欢学习的暖男（我信你个鬼），好了，看到这里，本编博客的内容就要结束了，我们下篇文章见。
结尾
如果觉得本篇文章对您有用的话，可以麻烦您帮忙点亮那个点赞按钮吗？
对于杨戬这个暖男来说：真的真的非常有用，您的支持将是我继续写文章前进的动力，我们下篇文章见。
【原创】|二郎神杨戬
二郎神杨戬，一个在互联网前端苟且偷生的划水程序员，专注于前端开发，善于技术分享。
如需转载，请联系作者或者保留原文链接，微信公众号搜索二郎神杨戬或者扫描下方的二维码更加方便。一起来见证二郎神杨戬的成长吧！更多好文、技术分享尽在下方这个公众号。欢迎关注。
