輪播圖：原生JS+CSS3

輪播圖基本上是前端所必須面臨的一個功能。並且在網上能夠找到各類各樣的插件或者寫法。

可是我我的以爲仍是寫一下比較好。這裏用到的是原生JS、CSS3相結合的寫法。

對IE 8如下的兼容性不是太好。但相對於瀏覽器使用狀況來講，仍是能夠的。

下邊是css樣式：

body{margin: 0;padding: 0;}
img{border: none;vertical-align: middle;}
.banner{width: 500px;height: 181px;overflow: hidden;margin: 100px auto 0;}
.banner-conent a{display: block;text-decoration: none;float: left;}
.banner-conent img{width: 500px;height: 181px;}

<div class="banner">
    <div class="banner-conent">
        <a href="#">
            <img src="../image/livehouse@3x.png">
        </a>
        <a href="#">
            <img src="../image/livehouse@3x.png"> 
        </a>
        <a href="#">
            <img src="../image/livehouse@3x.png">
        </a>
    </div>
</div>

經過transitoinEnd事件對象來實現圖片的切換。

var itcast={
    /*transitoinEnd:事件對象，在 CSS 完成過渡後觸發。*/
    transitoinEnd:function(dom,fn){
         if(dom && typeof dom ==='object'){                  
             dom.addEventListener("webkitTransitionEnd",function(){
                 fn && fn();
             });          
             dom.addEventListener("transitionEnd",
                function() {
                    fn && fn();
                }
                         )
        }
     }
}    

獲取元素以及相關變量的聲明：

var banner = document.querySelector(".banner");/*獲取最外層元素*/
    var imageBox=banner.querySelector(".banner-conent");/*獲取父級元素*/
    imageBox.style.width= 3*100+"%"; /*經過子級元素算出父級元素的寬度*/
    var w=banner.offsetWidth;
    var index=0;
    var img_length = 3;
    /*添加過濾效果*/
    var addTransition=function(){
            imageBox.style.transition="all 0.5s";
            imageBox.style.webkitTransition="all 0.5s";
        };
    /*移除效果*/        
    var removeTransition=function(){
            imageBox.style.transition="none";
            imageBox.style.webkitTransition="none";
        }
    /*設置偏移量*/
    var addTranslate=function(w){
            imageBox.style.transform="translateX("+w+"px)";
            imageBox.style.webkitTransform="translateX("+w+"px)";
        }

 開啓定時器：

/*經過定時器來控制輪播速度*/
    var timer=setInterval(function(){
            addTransition();
            index++;
            addTranslate(-index*w);      
        },3000);

　　itcast.transitoinEnd(imageBox,function(){
　　　　if(index<0){
　　　　　　index=img_length;
　　　　　　removeTransition();
　　　　　　addTranslate(-index * w);
　　　　}
　　　　else if(index>=(img_length)){
　　　　　　index=0;
　　　　　　removeTransition();
　　　　　　addTranslate(-index * w);
　　　　}
　　});

添加左右滑動事件

var startX=0;
    var moveX=0;
    var distinceX=0;
    var isMove=false;
    /*左右滑動事件*/
    imageBox.addEventListener("touchstart",function(event){
        clearInterval(timer);
        startX=event.touches[0].clientX;        
    });
    imageBox.addEventListener("touchmove",function(event){
        isMove=true;
        moveX=event.touches[0].clientX;
        distinceX=moveX-startX;
        var current=(-index*w)+distinceX;
        removeTransition();
        addTranslate(current);
    })
    imageBox.addEventListener("touchend",function(){
        if(isMove && Math.abs(distinceX)>w/3){
            if(distinceX>0){
                index--;
            }else{
                index++;
            }
            addTransition();
            addTranslate(-index*w);
        }else{
            addTransition();
            addTranslate(-index*w);
        }
        timer=setInterval(function(){
            index++;
            addTransition();
            addTranslate(-index*w);
        },3000);
    })

經過上述代碼，你會發現當輪播到最後一張時，會出現一個短暫的空白（BUG）,這個時候，只須要再最後多添加一次第一張圖片，同時修改父級元素的寬度和img_length便可實現無縫完美輪播！