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"><liv-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"><liv-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>