Vue渐变淡入淡出的轮播图 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         body, p, img, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
 8         body { position: relative; font: 12px/1.5 Simsun, Arial; }
 9         ul, ol { list-style: none; }
10         img { border: 0 none; }
11         input, select { vertical-align: middle; }
12         table { border-collapse: collapse; }
13         s, em, i { font-style: normal; text-decoration: none; }
14         a { outline: none; text-decoration: none; }
15         a:hover { text-decoration: underline; }
16         .clear { *zoom: 1; }
17         .clear:after { clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden; zoom: 1; }
18         .flip-list-enter-active, .flip-list-leave-active {
19             transition: all 1s;
20         }
21         .flip-list-enter, .flip-list-leave-active {
22             opacity: 0;
23         }
24         #app li {
25             position: absolute;
26             top: 0;
27             left: 0;
28         }
29     </style>
30     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
31     <script src="https://unpkg.com/vue/dist/vue.js"></script>
32 </head>
33 <body>
34 
35 <div id="app" class="demo">
36     <transition-group name="flip-list" tag="ul">
37         <li v-for="curImg in currImgs" v-bind:key="curImg" class="list-item">
38             <img :src="curImg">
39         </li>
40     </transition-group>
41 </div>
42 
43 <script type="text/javascript">
44     new Vue({
45         el: '#app',
46         data: {
47             currImgs: [],
48             imgs: [
49                 'https://img11.360buyimg.com/da/jfs/t4000/107/2234194410/85271/6c24d985/58a50cafNb60886c9.jpg',
50                 'https://img20.360buyimg.com/da/jfs/t3154/175/5917485830/129679/f123634c/5897e6a2N83837dd2.jpg',
51                 'https://img1.360buyimg.com/da/jfs/t3133/89/5984232745/66970/beaf615c/589ac9bcNe544a72e.jpg',
52                 'https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg'
53             ],
54             index: 0
55         },
56         mounted: function () {
57             this.currImgs = [this.imgs[0]];
58             this.startChange();
59         },
60         methods: {
61             startChange: function () {
62                 var _this = this;
63                 setInterval(function () {
64                     if (_this.index < _this.imgs.length - 1) {
65                         _this.index++
66                     } else {
67                         _this.index = 0
68                     }
69                     _this.currImgs.splice(0, 1, _this.imgs[_this.index]);
70                 }, 2000);
71             }
72         }
73     })
74 </script>
75 </body>
76 </html>

 

posted on 2017-06-13 16:06  chuangzi  阅读(2054)  评论(0)    收藏  举报

导航