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%;
        }