轮播图-简易

前段时间做了一个简单的pc官网，首页肯定是有轮播图的，因为是过渡版本的官网，就想用简单的方法实现还过的去的轮播图的效果。

具体要求就是轮播区域，从右向左活动，循环滑动，没有箭头切换等要求。

简单搭建HTML结构

<article class="lunbo"> 
    <div class="lb_state0" id="lb_state0">
        <img class="img" src="images/index/lb1.jpg">
        <p>轮播图1</p>
    </div>
    <div class="lb_state1" id="lb_state1">
        <img class="img " src="images/index/lb2.jpg">
        <p>轮播图2</p>
    </div>
</article>

复制代码

写一下css样式

.lunbo{
  position: relative;
  width:100%;
  height:500px;
  font-size: 14px;
  color: #666666;
  text-align: center;
  overflow: hidden; 
}
.lb_state0,.lb_state1{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transition: left 1s;
  -moz-transition: left 1s; /* Firefox 4 */
  -webkit-transition: left 1s; /* Safari 和 Chrome */
  -o-transition: left 1s; /* Opera */
}
.lb_state0 img,.lb_state1 img{
  width:100%;
  height:100%;
  margin:0 auto;
}
.lb_state1{left:100%;}
复制代码

transition主要是一个滑动缓动的效果，动画属性是left，时间是1s.

简单的js控制循环，定时器

 var flag= 0;//初始为第一张
    var t = setInterval(function(){
      if(flag == 0){
        $('lb_state1').style.visibility = 'visible';
        $('lb_state0').style.left = '-100%';
        $('lb_state1').style.left = '0';
        setTimeout(function(){
          $('lb_state0').style.visibility = 'hidden';
          $('lb_state0').style.left = '100%';},1000);       
        flag = false;
      }else{
        $('lb_state0').style.visibility = 'visible';
        $('lb_state0').style.left = '0';
        $('lb_state1').style.left = '-100%';
         setTimeout(function(){
          $('lb_state1').style.visibility = 'hidden';
          $('lb_state1').style.left = '100%';},1000);
        flag = 1;
      }
    },2000);
复制代码

原理就是定时器2s执行一次，一次包括当前所展示页面花费1s时间滑动到最左端，且下一张从最右端滑动到中间展示区域，在1s之后执行定时器setTimeout，将滑出的页面隐藏，且滑动到最右端，以便下次执行滑动动画。

若是拓展为多张页面，只要单独处理最后一张滑动时，下次切换第一张即可。

转载于:https://juejin.im/post/5cd4fd4ff265da039b0889f4