轮播图

1、第一种无限轮播--手机端（监听事件）

function banner (){
var ulMove = document.querySelector(".banner ul");
var liArr = document.querySelectorAll(".banner ol li");
var width = document.querySelector(".banner ul li").offsetWidth;
var timer = null;
var index = 1;
function startTransition(){
    ulMove.style.transition = "all 0.5s";
}
function endTransition(){
    ulMove.style.transition = "";
}
function startTransform(distance){
    ulMove.style.transform = "translateX("+distance+"px)";
}
clearInterval(timer);
timer = setInterval(moveBanner,2000);
function moveBanner(){
    index++;
    startTransition();
    startTransform(index*width*-1);
}
ulMove.addEventListener("webkitTransitionEnd",function(){
    // console.log(index+"过渡结束");
    if(index>8){
        index = 1;
        endTransition();
        startTransform(index*width*-1);
    }else if(index<1){
        index = 8;
        endTransition();
        startTransform(index*width*-1);
    }
    for(var i=0;i<liArr.length;i++){
        liArr[i].className = "";
    }
    liArr[index-1].className = "current";
});
var startX = 0;
var moveX = 0;
var distanceX = 0;
ulMove.addEventListener("touchstart",function(event){
    endTransition();
    clearInterval(timer);
    startX = event.touches[0].clientX;
});
ulMove.addEventListener("touchmove",function(event){
    moveX = event.touches[0].clientX-startX;
    startTransform(moveX+index*width*-1);
});
ulMove.addEventListener("touchend",function(event){
    if(Math.abs(moveX)>width/2){
        if(moveX>0){
            index--;
        }else {
            index++;
        }
        startTransition();
        startTransform(index*width*-1);
    }else {
        startTransition();
        startTransform(index*width*-1);
    }
    timer = setInterval(moveBanner,2000);
})
}
function tap(element,callback){
    var bool = false;
    var starTime = 0;
    var endTime = 0;
    element.addEventListener("touchstart",function(event){
        starTime =Data.now();
        bool = false;
    });
    element.addEventListener("touchstart",function(event){
        bool = true;
    });
    element.addEventListener("touchstart",function(event){
        if(bool){
            return;
        }
        if(Data.now()-starTime>250){
            return;
        }
        callback(event);
    })
}

第二种：pc端

var all = document.getElementById("all");
        var screen = all.firstElementChild || all.firstChild;
        var imgWidth = screen.offsetWidth;
        var ul = screen.firstElementChild || screen.firstChild;
        var ol = screen.children[1];
        var div = screen.lastElementChild || screen.lastChild;
        var spanArr = div.children;
        var ulNewLi = ul.children[0].cloneNode(true);
        ul.appendChild(ulNewLi);
        for(var i=0;i<ul.children.length-1;i++){
            var olNewLi = document.createElement("li");
            olNewLi.innerHTML = i+1;
            ol.appendChild(olNewLi);
        }
    var olLiArr = ol.children;
    olLiArr[0].className = "current";
    for(var i=0;i<olLiArr.length;i++){
        olLiArr[i].index = i;
        olLiArr[i].onmouseover = function (){
            for(var j=0;j<olLiArr.length;j++){
                olLiArr[j].className ="";
            }
            this.className = "current";
            key = square = this.index;
            animate(ul,-this.index*imgWidth);
        }
    }
    var timer = setInterval(autoPlay,1000);
    var key = 0;
    var square = 0;
    function autoPlay(){
        key++;
        if(key>olLiArr.length){
            ul.style.left = 0;
            key = 1;
        }
        animate(ul,-key*imgWidth);
        square++;
        if(square>olLiArr.length-1){
            square = 0;
        }
        for(var i=0;i<olLiArr.length;i++){
            olLiArr[i].className ="";
        }
        olLiArr[square].className = "current";
    }
    all.onmouseover = function (){
        div.style.display ="block";
        clearInterval(timer);
    };
    all.onmouseout = function () {
        div.style.display ="none";
        timer = setInterval(autoPlay,1000);
    };
    spanArr[1].onclick = function (){
        autoPlay();
    };
    spanArr[0].onclick = function (){
        key--;
        if(key<0){
            ul.style.left = -imgWidth*(olLiArr.length)+"px";
            key = olLiArr.length-1;
        }
        animate(ul,-key*imgWidth);
        square--;
        if(square<0){
            square = olLiArr.length-1;
        }
        for(var i=0;i<olLiArr.length;i++){
            olLiArr[i].className ="";
        }
        olLiArr[square].className = "current";
    };

    function animate(ele,target){
        clearInterval(ele.timer);
        var speed = target>ele.offsetLeft?10:-10;
        ele.timer = setInterval( function(){
            var val = target-ele.offsetLeft;
            ele.style.left = ele.offsetLeft+speed+"px";
            if(Math.abs(val)<Math.abs(speed)){
                ele.style.left = target+"px";
                clearInterval(ele.timer);
            }
        },10)
    }