vue上的简单轮播图

Posted 2020-10-03 瓶子2333

好久没写轮播图了，今天在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         }