<div class="layout">
    <div class="jd_banner">
        <ul class="clearfix">
            <li><a href="#"><img src="images/l1.jpg"></a></li>
            <li><a href="#"><img src="images/l2.jpg"></a></li>
            <li><a href="#"><img src="images/l3.jpg"></a></li>
            <li><a href="#"><img src="images/l4.jpg"></a></li>
            <li><a href="#"><img src="images/l5.jpg"></a></li>
            <li><a href="#"><img src="images/l6.jpg"></a></li>
            <li><a href="#"><img src="images/l7.jpg"></a></li>
            <li><a href="#"><img src="images/l8.jpg"></a></li>
            <li><a href="#"><img src="images/l1.jpg"></a></li>
        </ul>
    </div>
</div>

/*輪播圖*/
function banner() {
    var banner = document.querySelector('.banner');
    /*獲取設(shè)備寬度*/
    var offsetWidth = banner.offsetWidth;
    /*圖片容器*/
    var imageBox = banner.querySelector('ul:first-child');
    /*給圖片容器添加過(guò)渡動(dòng)畫(huà)屬性*/
    function addTransition() {
        imageBox.style.transition = 'all 0.5s';
        imageBox.style.webkitTransition = 'all 0.5s';
    }
    /*清除圖片容器添加過(guò)渡動(dòng)畫(huà)屬性*/
    function removeTransition() {
        imageBox.style.transition = 'none';
        imageBox.style.webkitTransition = 'none';
    }
    /*設(shè)置X軸定位*/
    function setTranslateX(offsetX) {
        imageBox.style.transform = 'translateX(' + offsetX + 'px)';
        imageBox.style.webkitTransform = 'translateX(' + offsetX + 'px)';
    }
    // 定義當(dāng)前索引
    var index = 1;
    // 自動(dòng)輪播
    var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index * offsetWidth);
        //同步設(shè)置css
        //底層異步操作
    }, 2000);
    transVar.transitionEnd(imageBox, function () { //監(jiān)聽(tīng)每一次動(dòng)畫(huà)的結(jié)束
        if (index >= 9) { // 當(dāng)輪播到第9張的時(shí)候,無(wú)縫切換到第1張圖片
            index = 1;
            // 清除過(guò)渡
            removeTransition();
            //無(wú)動(dòng)畫(huà)效果的定位到第一張圖片
            setTranslateX(-index * offsetWidth);
        } 
    });
  }

window.transVar = {};   //定義一個(gè)window的全局對(duì)象
//監(jiān)聽(tīng)css3過(guò)渡動(dòng)畫(huà)的結(jié)束事件
transVar.transitionEnd = function(obj,callback){
    if (typeof  obj == 'object'){
        obj.addEventListener('webkitTransitionEnd',function(){  // 兼容寫(xiě)法
            callback && callback();  // && 運(yùn)算符 , 如果callback函數(shù)存在,則調(diào)用callback()函數(shù)
        })
        obj.addEventListener('transitionEnd',function(){
            callback && callback();
        })
    }
}

var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index * offsetWidth);
        if (index >= 9) {   // 當(dāng)輪播到第9張時(shí),不調(diào)用監(jiān)聽(tīng)動(dòng)畫(huà)事件,直接取消過(guò)渡狀態(tài)
            removeTransition();
            index = 1;
            setTranslateX(-index * offsetWidth);
        } 
    }, 2000);