vue中轮播图的实现
轮播图中html结构一般由主体图片、下方小圆圈、上一张和下一张组成。
主体图片能够实现两秒切换一次,并且对应的小圆圈被选中
点击上一张和下一张按钮切换相应图片,同时小圆圈产生变化。
点击小圆圈切换图片
鼠标放在图片主体上停止轮播,鼠标离开主体图片开始轮播。
html结构
<div class="container">
<div class="lunbo" @mouseenter="clear" @mouseleave="run">
//1、主体图片
<div class="img">
<img :src="dataList[currentIndex]" alt="" />
</div>
//2、下方圆圈
<div class="dooted" v-if="this.dataList.length">
<ul class="doo">
<li
v-for="(item, index) in this.dataList"
:key="index"
:class="{ current: currentIndex == index }"
@click="gotoPage(index)"
></li>
</ul>
</div>
//3、下一张
<div class="right turn" @click="next()">
<i class="el-icon-arrow-right"></i>
</div>
//4、上一张
<div class="left turn" @click="up()">
<i class="el-icon-arrow-left"></i>
</div>
</div>
</div>
data()
data中定义轮播的图片,显示图片的索引值,定时器。
通过索引值来控制展示哪张图片
data () {
return {
dataList: [
'https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg',
'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg',
'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg'
],
currentIndex: 0, // 默认显示图片
timer: null // 定时器
}
},
created
created中 进入就开始轮播
created () {
this.run()
},
methods
methods中
methods: {
//点击小圆圈切换图片
gotoPage (index) {
this.currentIndex = index
},
//下一张
next () {
if (this.currentIndex === this.dataList.length - 1) {
this.currentIndex = 0
} else {
this.currentIndex++
}
},
//上一张
up () {
if (this.currentIndex === 0) {
this.currentIndex = this.dataList.length - 1
} else {
this.currentIndex--
}
},
//清除定时器
clear () {
clearInterval(this.timer)
},
// 定时器
run () {
this.timer = setInterval(() => {
this.next()
}, 2000)
}
}
完整代码
<template>
<div class="container">
<div class="lunbo" @mouseenter="clear" @mouseleave="run">
<div class="img">
<img :src="dataList[currentIndex]" alt="" />
</div>
<div class="dooted" v-if="this.dataList.length">
<ul class="doo">
<li
v-for="(item, index) in this.dataList"
:key="index"
:class="{ current: currentIndex == index }"
@click="gotoPage(index)"
></li>
</ul>
</div>
<div class="right turn" @click="next()">
<i class="el-icon-arrow-right"></i>
</div>
<div class="left turn" @click="up()">
<i class="el-icon-arrow-left"></i>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
dataList: [
'https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg',
'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg',
'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg'
],
currentIndex: 0, // 默认显示图片
timer: null // 定时器
}
},
created () {
this.run()
},
methods: {
gotoPage (index) {
this.currentIndex = index
},
next () {
if (this.currentIndex === this.dataList.length - 1) {
this.currentIndex = 0
} else {
this.currentIndex++
}
},
up () {
if (this.currentIndex === 0) {
this.currentIndex = this.dataList.length - 1
} else {
this.currentIndex--
}
},
clear () {
clearInterval(this.timer)
},
// 定时器
run () {
this.timer = setInterval(() => {
this.next()
}, 2000)
}
}
}
</script>
<style lang="less" scoped>
ul li {
float: left;
width: 30px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
color: rgba(240, 238, 238, 0.8);
font-size: 14px;
}
.container {
position: relative;
height: 200px;
width: 402px;
margin: 0 400px;
.img {
height: 200px;
width: 400px;
border: 1px solid gray;
img {
height: 100%;
width: 100%;
}
}
.dooted {
position: absolute;
bottom: -10px;
right: 0px;
}
}
.turn {
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 5px;
cursor: pointer;
background-color: #d0d0d073;
}
.right {
position: absolute;
top: 100px;
right: 0;
}
.left {
position: absolute;
top: 100px;
left: 0;
}
.current {
color: gray;
}
</style>