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>