vue2.0实现一个简单的轮播图

1. <template>  
2.   <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">  
3.     <div class="slideshow">  
4.       <transition-group tag="ul" name="image">  
5.         <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">  
6.           <a href="#">  
7.             <img :src='img'>  
8.           </a>  
9.         </li>  
10.       </transition-group>  
11.     </div>  
12.     <div class="bullet">  
13.       <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }"  
14.       @click="change(index)" :key="index"></span>  
15.     </div>  
16.   </div>  
17. </template>  
18.   
19. <script>  
20. export default {  
21.   data () {  
22.     return {  
23.       timer: null, //定时器  
24.       mark: 0, //比对图片索引的变量  
25.       imgArray: [  
26.         '../static/timg1.jpg',  
27.         '../static/timg2.jpg',  
28.         '../static/timg3.jpg',  
29.         '../static/timg4.jpg'  
30.       ]  
31.     }  
32.   },  
33.   methods: {  
34.     autoPlay () {  
35.       this.mark++;  
36.       if (this.mark === 4) {  
37.         this.mark = 0  
38.       }  
39.     },  
40.     play () {  
41.       this.timer = setInterval(this.autoPlay, 2500)  
42.     },  
43.     change (i) {  
44.       this.mark = i  
45.     },  
46.     stop () {  
47.       clearInterval(this.timer)  
48.     },  
49.     move () {  
50.       this.timer = setInterval(this.autoPlay, 2500)  
51.     }  
52.   },  
53.   created () {  
54.     this.play()  
55.   }  
56. }  
57. </script>  

[css]  view plain  copy

1. <style>  
2.   * {  
3.     margin: 0;  
4.     padding: 0;  
5.     list-style: none;  
6.   }  
7.   .slide {  
8.     width: 1024px;  
9.     height: 320px;  
10.     margin: 0 auto;  
11.     margin-top: 50px;  
12.     overflow: hidden;  
13.     position: relative;  
14.   }  
15.   .slideshow {  
16.     width: 1024px;  
17.     height: 320px;  
18.   }  
19.   li {  
20.     position: absolute;  
21.   }  
22.   img {  
23.     width: 1024px;  
24.     height: 320px;  
25.   }  
26.   .bar {  
27.     position: absolute;  
28.     width: 100%;  
29.     bottom: 10px;  
30.     margin: 0 auto;  
31.     z-index: 10;  
32.     text-align: center;  
33.   }  
34.   .bar span {  
35.     width: 20px;  
36.     height: 5px;  
37.     border: 1px solid;  
38.     background: white;  
39.     display: inline-block;  
40.     margin-right: 10px;  
41.   }  
42.   .active {  
43.     background: red !important;  
44.   }  

1. .image-enter-active {  
2.     transform: translateX(0);  
3.     transition: all 1.5s ease;  
4.   }  
5.   .image-leave-active {  
6.     transform: translateX(-100%);  
7.     transition: all 1.5s ease;  
8.   }  
9.   .image-enter {  
10.     transform: translateX(100%);  
11.   }  
12.   .image-leave {  
13.     transform: translateX(0);  
14.   }  

1. </style>  

           效果如下面：