基于vue2.0实现简单轮播图
因为之前⼀直在忙公司的项⽬，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>
第三步：
创建定时器，每隔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;js实现轮播图最简代码
width: 100%;
bottom: 10px;
margin: 0 auto;
z-index: 10;
text-align: center;
}
.bar span {
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，如当⼀个切换动画未完成前点击另⼀个按钮会出现神奇的交错现象，由于时间关系还未解决，
希望各位看官能提出宝贵的建议！
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。