一 准备数据
(1)定义一个dataList,里面存放我们的图片
dataList:['../../static/images/300.jpg','../../static/images/301.jpg']
(2)currentIndex:来表示当时当前图片的索引
currentIndex:0
二、显示一张图片
<div class="banner">
<div class="item">
<img :src="dataList[currentIndex]">
</div>
</ul>
</div>
这样就显示了索引为0的图片了
三、遍历dataList,通过索引来访问图片
<div class="banner">
<div class="item">
<img :src="dataList[currentIndex]">
</div>
<ul>
<li v-for="(data,index) in dataList" :key="index" @click="setCurrentIndex(index)" :style="{backgroundColor:currentIndex==index?'green':''}">
第{{index+1}}张
</li>
</ul>
</div>
写个setCurrentIndex方法
setCurrentIndex (index) {
this.currentIndex=index
}
这样我们就可以点击图片的索引访问了
四、实现图片定时轮播
写一个计算属性nextIndex
nextIndex () {
if (this.currentIndex==this.dataList.length-1){
return 0
} else {
return this.currentIndex+1
}
console.log('currentIndex:' + this.currentIndex)
return this.currentIndex
}
在设置个定时器
setInterval(() => {
this.setCurrentIndex(this.nextIndex)
},3000)
这样就可以实现图片的轮播以及点击相应的图片索引访问了
完整代码:
<template>
<div class="banner">
<div class="item">
<img :src="dataList[currentIndex]">
</div>
<ul>
<li v-for="(data,index) in dataList" :key="index" @click="setCurrentIndex(index)" :style="{backgroundColor:currentIndex==index?'green':''}">
第{{index+1}}张
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Test",
data () {
return {
dataList:['../../static/images/300.jpg','../../static/images/301.jpg'],
currentIndex:0
}
},
methods: {
setCurrentIndex (index) {
this.currentIndex=index
}
},
created() {
console.log( this.dataList.length)
},
computed: {
nextIndex () {
if (this.currentIndex==this.dataList.length-1){
return 0
} else {
return this.currentIndex+1
}
console.log('currentIndex:' + this.currentIndex)
return this.currentIndex
}
},
mounted() {
setInterval(() => {
this.setCurrentIndex(this.nextIndex)
},3000)
}
}
</script>
<style scoped lang="less">
ul{
list-style-type: none;
display: flex;
li{
width: 50px;
&:hover{
cursor: pointer;
}
}
}
</style>