轮播图：原生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便可实现无缝完美轮播！