js+css3 輪播

1，css3動畫性能高於js動畫緣由

    css3的 transform 屬性 將使dom單獨爲一個層，重渲染時只要改變該層，再合併圖層

    而js的動畫可能同時涉及多個層，當頁面複雜時，重渲染很是消耗性能

2，關鍵代碼

    transition: all 0.5s ease-out;

    全部屬性改變進行0.5s的延時變化，使用緩出的緩動公式來進行補間動畫

3，全部代碼

html：

<div id="slide" class="page page-5">
    <div class="slide-box">
        <div class="img-box active">
            <img src="images1.jpg">
            <div class="right-icon"></div>
        </div>
        <div class="img-box">
            <div class="left-icon"></div>
            <img src="images2.jpg">
            <div class="right-icon"></div>
        </div>
        <div class="img-box">
            <div class="left-icon"></div>
            <img src="images3.jpg">
        </div>
    </div>
    <div class="slide-option-box">
        <div class="active"></div>
        <div class=""></div>
        <div class=""></div>
    </div>
</div>

css

.page-5{
  position: absolute;
  top: 400%;
  overflow: hidden;

  .slide-box{
    width: 400%;
    transition: all 0.5s ease-out 0s;

    .img-box{
      width: 25%;
      height: 100%;
      display: inline-block;

      img{
        width: 101%;
        height: auto;
      }
    }
  }

  .left-icon{
    position: absolute;
    top:45%;
    left:5%;
    width: 1.3rem;
    height: 2.4rem;
    background: url('../images/left-icon.png') no-repeat;
    background-size: contain;
    display: none;
  }
  .right-icon{
    position: absolute;
    top:45%;
    right:5%;
    width: 1.3rem;
    height: 2.4rem;
    background: url('../images/right-icon.png') no-repeat;
    background-size: contain;
    display: none;
  }

  .active{
    .left-icon{
      display: block;
    }
    .right-icon{
      display: block;
    }
  }

  .slide-option-box{
    position: absolute;
    top: 90%;
    left:48%;

    div{
      background: url('../images/no_active.png') no-repeat;
      background-size: cover;
      width: 0.8rem;
      height: 0.8rem;
      display: inline-block;

    &.active{
      background: url('../images/active.png') no-repeat;
      background-size: cover;
      }
    }


  }
}

js部分

var slide = function(){
    var index = 0;
    var oldIndex = 0;
    var lastIndex = 0;
    var width = document.body.clientWidth;
    var left = 0;
    var dir = 0;
    var timeout = 0;
    var dom = document.getElementsByClassName('slide-box')[0];
    var options = document.getElementsByClassName('slide-option-box')[0].getElementsByTagName('div');
    var imgLists = document.getElementsByClassName('img-box');
    var leftList = document.getElementsByClassName('right-icon');
    var rightList = document.getElementsByClassName('left-icon');

    for(var i=0;i<leftList.length;i++){
        leftList[i].addEventListener('click',function(){
            index = lastIndex;
            oldIndex = lastIndex;
            slideChange(1,'click');
        });
    }
    for(var i=0;i<rightList.length;i++){
        rightList[i].addEventListener('click',function(){
            index = lastIndex;
            oldIndex = lastIndex;
            slideChange(-1,'click');
        });
    }

    function slideChange(k, type){
        clearTimeout(timeout);
        options[lastIndex].className = '';
        imgLists[lastIndex].className = 'img-box';

        index += k;
        dir = k;

        if(index>2){
            index = 0;
            left = 0;
        }

        options[index].className = 'active';
        imgLists[index].className = 'img-box active';
        lastIndex = index;

        slideStep();
    }
    function slideStep(){
        left = (index) * width;
        dom.setAttribute('style','margin-left:-'+left+'px;');

        if(dir > 0){
            if(left >= width * (index)){
                timeout = setTimeout(function(){
                    slideChange(1);
                },5000);
                return;
            }
        }else{
            if(left <= width * (index)){
                timeout = setTimeout(function(){
                    slideChange(1);
                },5000);
                return;
            }
        }
    }
    slideChange(1);
};

slide();