首先简单说一下,这个轮播图的功能,有点击功能,包含点击下一张,上一张,和点击首页触发定时器,下面贴一下代码:
HTML部分
<div class="nav"> <img :src="img" @click="bling()"> <!--显示一张图片,并给图片添加点击事件--> <ul> <li v-for="(item,index) in arr"></li> </ul> <button @click="prev()">上一张</button> <button @click="next()">下一张</button> </div>
CSS部分
<style> img{ display:block; margin:0 auto; width:320px; height:130px; } .nav li{ list-style: none; } </style>
vue.js部分
<script> window.onload = function(){ var nav = new Vue({ el:'.nav', data:{ img:'goods_pics/q14.jpg', json:[ "goods_pics/q14.jpg", "goods_pics/q50.jpg", "goods_pics/q51.jpg", "goods_pics/q54.jpg", "goods_pics/q75.jpg" ], index:0 }, methods:{ next:function(){ this.img=this.arr[this.index++]; if(this.index>4){ this.index=0; //当超过图片数量,返回第一张图片 } }, prev:function(){ this.img = this.arr[this.index--]; if(this.index<0){ this.index=4; } //当index值<0时,返回最后一张图片 }, //点击首张图片触发函数功能 bling:function(){ let self=this; //定时器,每2秒换一张图片 setInterval(function(){ self.img=self.arr[self.index++]; if(self.index>4){ self.index=0; } },2000); } }, }); } </script>