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>
