1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title></title> 8 <style> 9 ul{ 10 list-style: none; 11 overflow: hidden; 12 display: inline-block 13 } 14 ul .img_li{ 15 width: 50px; 16 height: 50px; 17 float: left; 18 background-color:aquamarine; 19 margin: 0px,10px; 20 text-align: center; 21 color: aliceblue; 22 } 23 </style> 24 <body> 25 26 27 <!-- 28 标签里面是需要加{} 29 而属性里面是不需要加的，直接是“”就可以取到相对应的值出来 30 31 --> 32 <div id="img_div" class="app01"> 33 <h1>{{msg}}</h1> 34 <div> 35 36 37 <!-- //:就是绑定src，@就是实时监听,这个是for循环，后面是加索引值，循环到哪一个图片 --> 38 <img :src='imgsrc' @mouseenter='closeTimer' @mouseleave='openTimer'> 39 <!-- 当鼠标在这个图片里面的话，这个就停止，当鼠标移除的时候，这个就开启图片轮播,enter。leave，进入，离开，鼠标进入，离开 --> 40 <!--下面的for循环放在li里面也可以，放在ul里面有可以--> 41 <ul v-for="(item,i) in items " > 42 <li class="img_li" v-on:click='changepic(item)'> 43 <!--这个里面的item可以传进去的，click事件是可以传参加进去的--> 44 {{i}} 45 </li> 46 </ul> 47 <button @click='pre_pic()'>上一张</button> 48 <button @click='next_pic()'>下一张</button> 49 </div> 50 </div> 51 </div> 52 53 54 55 56 57 58 <script type="text/javascript" src="vue.js"></script> 59 <!-- //字典是通过.来取值的，而这个列表时通过【】来取值的 --> 60 <script> 61 var app=new Vue({ 62 el:'#img_div', 63 data:{ 64 msg:"录播图例子",//里面是字典的形式, 65 imgsrc:'1.jpg', 66 imgindex:0,//索引值，当前的索引值 67 items:[ 68 {id:1,src:'1.jpg' }, 69 {id:2,src:'2.jpg'},//for循环拿到这个里面的每一个元素，可以进行取值 70 {id:3,src:'3.jpg'}, 71 72 73 ], 74 timer:null, 75 str:'<p>创建p标签</p>' 76 77 78 },//都是字典的形式 79 //注意，下面的created是自动设置时间，一定放在methods前面，否则不能自动 80 created(){//这个created是自带的方法，自动轮播 81 82 83 console.log('created') 84 this.timer=setInterval(this.next_pic,2000)//自动轮播这个this.next_pic的函数 85 }, 86 87 88 89 methods:{ 90 //下面的这个item就是你传过来的参数，当前点击的那个图片 91 changepic:function(item){ 92 this.imgsrc=item.src 93 }, 94 next_pic(){ 95 96 97 // this.imgindex++ 98 if (this.imgindex==this.items.length-1){ 99 this.imgindex=0 100 101 102 } 103 //但你点击了一下的时候，下面图片的索引值就加1 104 this.imgindex++ 105 this.imgsrc=this.items[this.imgindex].src 106 }, 107 108 109 pre_pic(){ 110 if(this.imgindex==0){ 111 this.imgindex=3}//的那个点击到最小的数的时候，索引值就变成3，下面在减去1就是2了，就是最大的字典的索引值 112 113 this.imgindex-- 114 this.imgsrc=this.items[this.imgindex].src 115 116 117 }, 118 //下面是自动轮播这图片出来 119 120 121 //上面绑定的事件 122 closeTimer(){ 123 clearInterval(this.timer); 124 //当悬浮在这个图片里面的时候，就清除这个自动轮播的效果 125 }, 126 openTimer(){ 127 this.timer=setInterval(this.next_pic,2000); 128 } 129 }, 130 131 132 }) 133 </script> 134 </body> 135 </head> 136 </html> 137