own:
version 1.0.0：
!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,9,10,11"> <title>myhtml</title> <style type="text/css"> .lunbo:after { content: ""; display: block; clear: both; } *{ padding: 0px; margin: 0px; } #app{ margin: 200px 0px 200px 200px; } ul{ width: 180px; list-style: none; } ul li { float: left; width: 30px; height: 30px; margin: 5px; background: purple; text-align: center; color:white; } </style> </head> <body> <div id="app"> <div class="lunbo"> <!-- 给图片绑定了鼠标移入、移出事件 --> <img v-bind:src='currentSrc' v-on:mouseenter='closeTimer' @mouseleave='openTimer'> <ul> <!-- index是当前项的索引。 --> <!-- 如果imager是字典取得就是name = k值，index = 索引，否则其他只能取索引值 --> <li v-for = "(item,name) in imgArr" @click='currenHanlde(item)' v-on:mouseenter='closeTimer' @mouseleave='openTimer' > {{name+1}}</li> </ul> </div> <div> <!-- 绑定了鼠标移入、移出事件、点击事件 --> <button v-on:mouseenter='closeTimer' @mouseleave='openTimer' v-on:click='previousImg' > 上一张</button> <!-- 绑定了鼠标移入、移出事件 点击事件 --> <button v-on:mouseenter='closeTimer' @mouseleave='openTimer' v-on:click='nextImg'> 下一张</button> </div> </div> <script src="./js/vue.js" type="text/javascript"></script> <script type="text/javascript"> var myapp = new Vue({ el:'#app', data:{ imgArr:[ {id:1,src:'./images/1.png'}, {id:2,src:'./images/2.png'}, {id:3,src:'./images/3.png'}, {id:4,src:'./images/4.png'}, ], // src上的计算属性 currentSrc:'./images/1.png', //创建了一个索引值，方便操作选择合适的视图 currentIndex:0, //用来停止自动执行的 nextImag 函数 timer:null, // cookie session 执行之前做点什么 created(){ // 设置时间间隔 每2秒执行一次 nextImag 函数 this.timer = setInterval(this.nextImg,2000) }, }, methods:{ // 点击1,2,3,4选项 切换到指定图片 currenHanlde(item){ this.currentSrc = item.src }, //上一张图片 previousImg(){ //如果是图片是当前的第一张，我就跳转到第四张 if(this.currentIndex == 0){ this.currentIndex = this.imgArr.length } //索引值自减1 this.currentIndex--; // 通过索引值 控制选取制定的src 并且 赋值给currentSrc this.currentSrc = this.imgArr[this.currentIndex].src }, // 下一张图片 nextImg(){ // 如果图片是最后一张我就 跳转到最后一张 if (this.currentIndex == this.imgArr.length-1){ //currentIndex == -1 在后面再加1就是0了。 this.currentIndex=-1 } // 索引自加1 this.currentIndex++; // 通过索引值 控制选取制定的src 并且 赋值给currentSrc this.currentSrc = this.imgArr[this.currentIndex].src }, //鼠标移入视图 我就停止 自动时间 间隔执行 closeTimer(){ clearInterval(this.timer); }, // 当鼠标移出视图 我就再次执行created 方法 openTimer(){ this.created(); } } }) </script> </body> </html>