因为最近在做一个积分奖励项目,首页要做一个轮播图,正好借这这次机会把本次使用vue2.0实现轮播图的详细过程分享出来。
废话不多说,先来个效果图(备注:图片是临时在网上找的,各位关注轮播图效果即可):
如上图所示,实现的就是一个间隔2.5s自动向左切换下一张的轮播图,同时鼠标移入停止轮播,移出回复轮播;
而下方按钮会根据当前图片自动变红且可以手动控制当前图片。
思路:
整个代码部分分为轮播图片和控制span两个部分。
按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单,
作为练手就不搞那么复杂了。
第一步,先写出整体代码框架:
<div id="topBanner" style="padding-top: 5px;" class="slide" >
<div v-for="(imgUrl, index) in bannerList" v-show="index===mark" :key="index" class="slideshow">
<a href="#">
<img :src=imgUrl style="width:100%;height:350px;">
</a>
</div>
<div class="bar">
<span v-for="(item, index) in bannerList" :key="index"></span>
</div>
</div>
我们使用v-for列表渲染两个部分,值得注意的是列表渲染最好要提供一个key值,至于为什么官方文档说得很复杂,
就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug,官方给出的建议也是尽可能
在列表渲染的时候加上key值,百利无一害,养成习惯就好。
第二步:
在上一步我们渲染的是一个img数组,具体:
data () {
return {
bannerList:["http://p3.so.qhimgs1.com/t01f3c2fbbfc190da13.jpg","http://p1.so.qhimgs1.com/t01fb8af23fa1c93441.jpg","http://p0.so.qhimgs1.com/t013e7b12d08f155a4c.jpg"]
}
然后实现轮播的原理就是创建一个变量与当前遍历的index值比对,若相同则显示,否则隐藏;
同时下方按钮index若也与变量相同则当前按钮变为活跃状态即背景变颜色。
<template>
<div id="topBanner" style="padding-top: 5px;" class="slide" >
<div v-for="(imgUrl, index) in bannerList" v-show="index===mark" :key="index" class="slideshow">
<a href="#">
<img :src=imgUrl style="width:100%;height:350px;">
</a>
</div>
<div class="bar">
<span v-for="(item, index) in bannerList" :class="{ 'active':index===mark }" :key="index"></span>
</div>
</div>
</template>
第三步:
创建定时器,每隔2.5s给变量mark+1,挂载到钩子函数created:
<script>
export default {
data () {
return {
mark: 0, //比对图片索引的变量
bannerList:["http://p3.so.qhimgs1.com/t01f3c2fbbfc190da13.jpg","http://p1.so.qhimgs1.com/t01fb8af23fa1c93441.jpg","http://p0.so.qhimgs1.com/t013e7b12d08f155a4c.jpg"]
}
},
methods: {
autoPlay () {
this.mark++;
if (this.mark === 3) { //当遍历到最后一张图片置零
this.mark = 0
}
},
play () {
setInterval(this.autoPlay, 2500)
},
change (i) {
this.mark = i
}
},
created () {
this.play()
}
}
</script>
第四步:
加上css文件,出现基本的效果。
<style>
.slide {
width: 950px;
height: 150px;
margin: 0 auto;
margin-top: 50px;
overflow: hidden;
position: relative;
}
.slideshow {
width: 95px;
height: 150px;
}
li {
position: absolute;
}
img {
width: 95px;
height: 150px;
}
.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: #bfd6b6 !important;
}
</style>
现在初步的轮播效果已经好了,每隔2.5秒会从左往右自动切换,更多细节效果敬请等待笔者持续更新