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