标签：false lock overflow float 功能 定时器 method position class
好久没写轮播图了，今天在vue上写了个超简单的，效果还ok。
.moveLeft{position:relative;right:ZOOMpx;transition:all 1s;}
原理是滚动时利用.moveLeft向左移动一个格子，造成滚动的假象，此时第二张图在第一个格子的位置；
这时候把第一个格子 li 的元素摘下接到 ul 末尾，并马上撤掉.moveLeft。每张图都在自己的格子上。
定时器循环该操作，一直轮播。可以用touch事件添加touchmove左右滑动效果和切换图片的功能，就不赘述了。
HTML：
<ul id="post_u">
<li class="post_i" v-for="pic in postset" :key="pic.id" :class="{moveLeft:moveLeft}">
<img :src="pic.src" >
</li>
</ul>
JS：
1 mounted(){ 2 this.loaded(); 3 }, 4 data () { 5 return { 6 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"}], 7 8 moveLeft:false 9 10 }; 11 }, 12 methods:{ 13 loaded () { 14 var vm=this; 15 var run = function() { 16 17 vm.moveLeft=true; 18 setTimeout(function(){ 19 vm.postset.push(vm.postset.shift()); 20 vm.moveLeft=false; 21 setTimeout(function(){ 22 run(); 23 },5000); 24 1 },5000) 25 26 } 27 setTimeout(function(){ 28 run(); 29 },1000) 30 } 31 }
CSS:
1 #post_u{ 2 3 //position:relative; 4 width:400%; 5 height:100%; 6 overflow:hidden; 7 .post_i{ 8 position:relative; 9 right:0%; 10 width:25%; 11 height:100%; 12 overflow:hidden; 13 float:left; 14 display:inline-block; 15 } 16 } 17 #post_u .post_i.moveLeft{ 18 position:relative; 19 transition:right 1s; 20 right:25%; 21 }
标签：false lock overflow float 功能 定时器 method position class
原文地址：http://www.cnblogs.com/alan2kat/p/7389024.html
