基于vue2.0实现简单轮播图

来源：懂视网责编：小采时间：2020-11-27 22:25:03

基于vue2.0实现简单轮播图

基于vue2.0实现简单轮播图:因为之前一直在忙公司的项目，vue这块就生疏了不少，正好借这个小demo复习下vue的知识。先来个效果图：如图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播；而下方按钮会根据当前图片自动变红且可以手动控

推荐度：

点击下载本文 文档为doc格式

导读基于vue2.0实现简单轮播图:因为之前一直在忙公司的项目，vue这块就生疏了不少，正好借这个小demo复习下vue的知识。先来个效果图：如图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播；而下方按钮会根据当前图片自动变红且可以手动控

因为之前一直在忙公司的项目，vue这块就生疏了不少，正好借这个小demo复习下vue的知识。

先来个效果图：

如图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播；
而下方按钮会根据当前图片自动变红且可以手动控制当前图片。

思路：

整个demo分为轮播图片和控制span两个部分。
按照前端工程化的需求来说，这两个部分应该解耦成两个component最后再导入页面比较合理，但由于demo较为简单，
作为练手就不搞那么复杂了，对项目有追求【强迫症】的童鞋可以往组件化的目标靠，具体方法参考我之前的博文。

第一步，先写出整体框架：

<template> 
 <div class="slide"> 
 <div class="slideshow"> 
 <ul> 
 <li v-for="(img, index) in imgArray" :key="index"> 
 <a href="#"> 
 <img :src='img'> 
 </a> 
 </li> 
 </ul> 
 </div> 
 <div class="bar"> 
 <span v-for="(item, index) in imgArray" :key="index"></span> 
 </div> 
 </div> 
</template>

我们使用v-for列表渲染两个部分，值得注意的是列表渲染最好要提供一个key值，至于为什么官方文档说得很复杂，
就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug，官方给出的建议也是尽可能
在列表渲染的时候加上key值，百利无一害，养成习惯就好。

第二步：

在上一步我们渲染的是一个img数组，具体：

data () { 
 return { 
 imgArray: [ 
 '../static/timg1.jpg', 
 '../static/timg2.jpg', 
 '../static/timg3.jpg', 
 '../static/timg4.jpg' 
 ] 
 } 
 }

然后实现轮播的原理就是创建一个变量与当前遍历的index值比对，若相同则显示，否则隐藏；
同时下方按钮index若也与变量相同则当前按钮变为活跃状态即背景变红。

<template> 
 <div class="slide"> 
 <div class="slideshow"> 
 <ul> 
 <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
 <a href="#"> 
 <img :src='img'> 
 </a> 
 </li> 
 </ul> 
 </div> 
 <div class="bar"> 
 <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" :key="index"></span> 
 </div> 
 </div> 
</template>

第三步：

创建定时器，每隔2.5s给变量mark+1，挂载到钩子函数created：

export default { 
 data () { 
 return { 
 mark: 0, //比对图片索引的变量 
 imgArray: [ 
 '../static/timg1.jpg', 
 '../static/timg2.jpg', 
 '../static/timg3.jpg', 
 '../static/timg4.jpg' 
 ] 
 } 
 }, 
 methods: { 
 autoPlay () { 
 this.mark++; 
 if (this.mark === 4) { //当遍历到最后一张图片置零 
 this.mark = 0 
 } 
 }, 
 play () { 
 setInterval(this.autoPlay, 2500) 
 }, 
 change (i) { 
 this.mark = i 
 } 
 }, 
 created () { 
 this.play() 
 } 
} 
</script>

第四步：

加上css文件，出现基本的效果。

<style> 
 * { 
 margin: 0; 
 padding: 0; 
 list-style: none; 
 } 
 .slide { 
 width: 1024px; 
 height: 320px; 
 margin: 0 auto; 
 margin-top: 50px; 
 overflow: hidden; 
 position: relative; 
 } 
 .slideshow { 
 width: 1024px; 
 height: 320px; 
 } 
 li { 
 position: absolute; 
 } 
 img { 
 width: 1024px; 
 height: 320px; 
 } 
 .bar { 
 position: absolute; 
 width: 100%; 
 bottom: 10px; 
 margin: 0 auto; 
 z-index: 10; 
 text-align: center; 
 } 
 .bar span { 
 width: 20px; 
 height: 5px; 
 border: 1px solid; 
 background: white; 
 display: inline-block; 
 margin-right: 10px; 
 } 
 .active { 
 background: red !important; 
 } 
</style>

第五步：

现在我们得到的效果还是每隔一段时间图片突然变成另外一张，用户体验很差，达不到轮播的效果。
所以我们得加上过渡效果。
html：

<transition-group tag="ul" name="image"> 
 <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
 <a href="#"> 
 <img :src='img'> 
 </a> 
 </li> 
</transition-group>

css：

.image-enter-active { 
 transform: translateX(0); 
 transition: all 1.5s ease; 
 } 
 .image-leave-active { 
 transform: translateX(-100%); 
 transition: all 1.5s ease; 
 } 
 .image-enter { 
 transform: translateX(100%); 
 } 
 .image-leave { 
 transform: translateX(0); 
 }

这里因为我们是给一个渲染列表加上过渡效果所以要使用transition-group而不是单元素的transition，否则会报错。
另外就是记得给transition-group加上tag="ul"属性，不然就会被默认渲染成span了。
css部分需要关联name属性值作为前缀。

第六步：

给下方按钮增加切换图片的点击事件。
最后我们再加上移入/移出实现关闭/打开定时器效果，即用户鼠标停留当前图片停止滚动，移出则继续。

<template> 
 <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()"> 
 <div class="slideshow"> 
 <transition-group tag="ul" name="image"> 
 <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
 <a href="#"> 
 <img :src='img'> 
 </a> 
 </li> 
 </transition-group> 
 </div> 
 <div class="bullet"> 
 <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" 
 @click="change(index)" :key="index"></span> 
 </div> 
 </div> 
</template> 
 
<script> 
export default { 
 data () { 
 return { 
 timer: null, //定时器 
 mark: 0, //比对图片索引的变量 
 imgArray: [ 
 '../static/timg1.jpg', 
 '../static/timg2.jpg', 
 '../static/timg3.jpg', 
 '../static/timg4.jpg' 
 ] 
 } 
 }, 
 methods: { 
 autoPlay () { 
 this.mark++; 
 if (this.mark === 4) { 
 this.mark = 0 
 } 
 }, 
 play () { 
 this.timer = setInterval(this.autoPlay, 2500) 
 }, 
 change (i) { 
 this.mark = i 
 }, 
 stop () { 
 clearInterval(this.timer) 
 }, 
 move () { 
 this.timer = setInterval(this.autoPlay, 2500) 
 } 
 }, 
 created () { 
 this.play() 
 } 
} 
</script>

这个地方卡了我很长时间，因为根据原生js定时器的思路在定义定时器的时候就应该设置变量，然后把这个变量传到clearInterval函数里。
问题在于vue函数里设置变量很不可取，存在定义域的问题，开启定时器跟关闭定时器是两个函数，不能共用一个变量。
后来灵机一动，想到不如把变量写在data里面？
一试，成功！

至此，轮播图的功能基本实现。
当然，项目做的比较简陋也存在一些bug，如当一个切换动画未完成前点击另一个按钮会出现神奇的交错现象，由于时间关系还未解决，
希望各位看官能提出宝贵的建议！

基于vue2.0实现简单轮播图

推荐度：

点击下载本文 文档为doc格式

标签： VUE 轮播简单

热门焦点

基于vue2.0实现简单轮播图

基于vue2.0实现简单轮播图

基于vue2.0实现简单轮播图

最新推荐

猜你喜欢

热门推荐