<style>
img{
display:block;
margin:0 auto;
width:500px;
height:500px;
}
#app li{
list-style: none;
} </style>
<body>
<div id="app"> <img :src="img" @click="autoCg()"> <!--显示一张图片，并给图片添加点击事件-->
<ul>
<li v-for="(item,index) in json"></li>
</ul>
<button @click="prev">上一张</button>
<button @click="next">下一张</button>
</div>
</body>
<script> new Vue({
el:'#app',
data:{
img:'./images/cao.jpg',
json:[
"./images/cao.jpg",
"./images/hua.jpg",
"./images/ning.jpg",
"./images/shu.jpg",
],
index:0
},
methods:{
next(){
this.img = this.json[this.index++];
if(this.index > 3){
this.index = 0; //当超过图片数量，返回第一张图片
}
},
prev(){
this.img = this.json[this.index--];
if(this.index < 0){
this.index = 3;
}
//当index值<0时，返回最后一张图片
},
//点击首张图片触发函数功能
autoCg(){
let self = this;
//定时器，每2秒换一张图片
setInterval(function(){
self.img = self.json [self.index++];
if(self.index > 3){
self.index = 0;
}
},2000);
} }, })
</script>