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
