用Vue实现一个简单的图片轮播
本文已收录至https://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/* http://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>
简单的轮播效果就已经实现了，整体难度不难，但是涉及的知识点比较多，从一个小的轮播效果就涉及那么多的知识点，所以说基础很重要，杨戬的基础也不是很好，但是杨戬是一个喜欢学习的暖男（我信你个鬼），好了，看到这里，本编博客的内容就要结束了，我们下篇文章见。
结尾
如果觉得本篇文章对您有用的话，可以麻烦您帮忙点亮那个点赞按钮吗？
对于杨戬这个暖男来说：真的真的非常有用，您的支持将是我继续写文章前进的动力，我们下篇文章见。
【原创】|二郎神杨戬
二郎神杨戬，一个在互联网前端苟且偷生的划水程序员，专注于前端开发，善于技术分享。
如需转载，请联系作者或者保留原文链接，微信公众号搜索二郎神杨戬或者扫描下方的二维码更加方便。一起来见证二郎神杨戬的成长吧！更多好文、技术分享尽在下方这个公众号。欢迎关注。
用Vue实现一个简单的图片轮播的更多相关文章
- 一步一步拆解一个简单的iOS轮播图（三图）
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- html+jq实现简单的图片轮播
今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 【原生JS】写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 使用Handler和Timer+Timertask实现简单的图片轮播
布局文件就只放了一个简单的ImageView,就不展示了. 下面是Activity package com.example.administrator.handlerthreadmessagedemo ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- vue 写一个炫酷的轮播图
效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-cer ...
- 纯CSS3代码实现简单的图片轮播
以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显 ...
随机推荐
- Spring Cloud Alibaba系列（四）使用gateway作为服务网关
什么是网关 在微服务架构里,服务的粒度被进一步细分,各个业务服务可以被独立的设计.开发.测试.部署和管理.这时,各个独立部署单元可以用不同的开发测试团队维护,可以使用不同的编程语言和技术平台进行设计, ...
- Web测试和app测试区别？
EB测试和APP测试从流程上来说,没有区别.都需要经历测试计划方案,用例设计,测试执行,缺陷管理,测试报告等相关活动.从技术上来说,WEB测试和APP测试其测试类型也基本相似,都需要进行功能测试,性能 ...
- 百度文本编辑器的toolbars属性值描述
toolbars: [ [ 'anchor', //锚点 'undo', //撤销 'redo', //重做 'bold', //加粗 ...
- linux网络编程-socket(2)
当客户端调用close函数的时候,服务器的read函数读到的数据是0读到文件结束通知,表示对端关闭了tcp连接 我们现实实现下面的功能: 1.tcp客户端从标准的输入流中得到输入数据发送到服务器,服务 ...
- Java工具类—包装类
Java工具类--包装类 我们都知道,JDK 其实给我们提供了很多很多 Java 开发者已经写好的现成的类,他们其实都可以理解成工具类,比如我们常见的集合类,日期相关的类,数学相关的类等等,有了这些工 ...
- dart快速入门教程 （5）
5.函数 5.1.函数定义 语法: 返回值类型 函数名(参数类型 参数1, 参数类型 参数2,...) { // 函数体 return '返回值' } 举例: void main() { print( ...
- windows挂载nas存储
操作系统:windows server 2016 1.安装nfs客户端打开程序面板 2.点击下一步 3.点击下一步 4.下一步 5.这里只选择文件和存储服务器就可以 6.选择nfs客户端,安装 7.m ...
- application.yml和application.properties文件的区别
maven项目 .yml文件时树状结构,层级浅时比较方便,层级深的时候就比较麻烦了 .properties文件时属性访问结构,层级深浅对它来说是一样的,而且相较于.yml类型的文件比较好配置,但缺点也 ...
- Dubbo 负载均衡的实现
前言 负载均衡是指在集群中,将多个数据请求分散在不同单元上进行执行,主要为了提高系统容错能力和加强系统对数据的处理能力. 在 Dubbo 中,一次服务的调用就是对所有实体域 Invoker 的一次筛选 ...
- 初探pandas——安装和了解pandas数据结构
安装pandas 通过python pip安装pandas pip install pandas pandas数据结构 pandas常用数据结构包括:Series和DataFrame Series S ...