// 圆点的点击事件
gotoPage (index) {
// 将index赋值给图片的下标currentIndex
this.currentIndex = index
},
// 点击事件的函数
// 上一张
prevIndex () {
// eslint-disable-next-line eqeqeq
if (this.currentIndex == 0) {
return this.dataList.length - 1
} else {
return this.currentIndex - 1
}
},
// 下一张
nextIndex () {
// eslint-disable-next-line eqeqeq
if (this.currentIndex == this.dataList.length - 1) {
return 0
} else {
return this.currentIndex + 1
}
},
// 定时器
runInv () {
this.timer = setInterval(() => {
this.gotoPage(this.nextIndex)
}, 1000)
}
}
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 // 定时器
}
<div class="banner">
<div class="item">
<img :src="dataList[currentIndex]" alt="加载中。。。">
</div>
<div class="page" v-if="this.dataList.length > 1">
<ul>
<li @click="gotoPage(prevIndex)"><</li>
<li v-for="(item,index) in dataList" @click="gotoPage(index)" :class="{‘current‘:currentIndex == index}" v-bind:key="index" class="number">{{index+1}}</li>
<li @click="gotoPage(nextIndex)">></li>
</ul>
</div>
</div>
