vue上的简单轮播图

好久没写轮播图了，今天在vue上写了个超简单的，效果还ok。

.moveLeft{position:relative;right:ZOOMpx;transition:all 1s;}

　　原理是滚动时利用.moveLeft向左移动一个格子，造成滚动的假象，此时第二张图在第一个格子的位置；

　　这时候把第一个格子 li 的元素摘下接到 ul 末尾，并马上撤掉.moveLeft。每张图都在自己的格子上。

　　定时器循环该操作，一直轮播。可以用touch事件添加touchmove左右滑动效果和切换图片的功能，就不赘述了。一个针对移动端的demo在github：https://alanknightly.github.io/ex/index.html#/

HTML：

<ul id="post_u">
<li class="post_i" v-for="pic in postset" :key="pic.id" :class="{moveLeft:moveLeft}">
<img :src="pic.src" alt="" >
</li>

</ul>

JS：

     mounted(){
             this.loaded();
     },
   data () {
     return {
         postset:[{src:"./src/img/1.jpg",id:"1"},{src:"./src/img/2.jpg",id:"2"},{src:"./src/img/13.png",id:"3"},{src:"./src/img/4.jpg",id:"4"}],

         moveLeft:false

     };
   },
 methods:{
       loaded () {
           var vm=this;
           var run = function() {

               vm.moveLeft=true;
               setTimeout(function(){
                   vm.postset.push(vm.postset.shift());
                   vm.moveLeft=false;
                   setTimeout(function(){
                       run();
                   },5000);
  1             },5000)

           }
           setTimeout(function(){
               run();
           },1000)
   }
 }

CSS:

     #post_u{

         //position:relative;
         width:400%;
         height:100%;
         overflow:hidden;
         .post_i{
             position:relative;
             right:0%;
             width:25%;
             height:100%;
             overflow:hidden;
             float:left;
             display:inline-block;
         }
     }
         #post_u .post_i.moveLeft{
             position:relative;
             transition:right 1s;
             right:25%;
         }