<div class="slide">
    <div class="slide-list" id="slidet">
    <div class="block">
        <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">00000000</span>
    </div>
    <div class="block">
            <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">11111111</span>
    </div>
    <div class="block">
            <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">22222222</span>
        </div>
    <div class="block">
        <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">33333333</span>
    </div>
    <div class="block">
        <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">44444444</span>
    </div>
    <div class="block">
        <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">55555555</span>
    </div>
    </div>
    <div class="dot-list">
        <div class="dot-wapper">
            <div class="dot dot-active"></div>
        </div>
        <div class="dot-wapper">
            <div class="dot"></div>
        </div>
        <div class="dot-wapper">
            <div class="dot"></div>
        </div>    
        <div class="dot-wapper">
                <div class="dot"></div>
        </div>    
    </div>
</div>        

.slide{position: relative; width: 100%;height: 153px;}
.slide-list{position: absolute;width: 600%;left: -100%;transform: translate3d(0px,0px,0px);transition-duration: 300ms;}
.block{position:relative;float: left; width: 16.66%;}

.dot-list{position: absolute;right: 5%;bottom: 8%;}
.dot-wapper{position: relative; float: left;width: 20px;height: 20px;}
.dot{width: 50%;height: 50%;border-radius: 50%;background: #DDDDDC;
             margin: 0 auto; /*水平居中*/
          position: relative;  /*垂直居中*/
        top: 50%;
        transform: translateY(-50%)}
.dot-active{background: #999898;}

function $id(id){
    return document.getElementById(id);
}
function $className(name){
    return document.getElementsByClassName(name);
}
function $tagName(name){
    return document.getElementsByTagName(name);
}


/**
 * 轮播图
 */
window.onload = sliderShow;


function sliderShow(){ 
    var stop;
    var index=0;
    var bd=document.documentElement.clientWidth;
    console.log("sss")
    autoPage();
    //自动 下一页
    function autoPage(){
        stop=setInterval(function(){
                nextimg();
            },5000);
    }    
    
    
    function trans(val){
        $id("slidet").style.transform="translate3d("+val+"px,0px,0px)";
    }
    
    //下一页
    function nextimg(){
        index++;
        if(index==$className("block").length-2){
            index=0;
        } 
        trans(-index*bd);
        //调用圆点移动  
        dotMove();
    }
    //上一页 
    function upimg(){
        index--;
        if(index==-1){
            index=$className("block").length-3;
        } 
        trans(-index*bd);
        //调用圆点移动  
        dotMove();
    }
    
    //右下角圆点 移动
    function dotMove(){
        console.log(index);
        for(var i=0;i<$className("dot").length;i++){
            $className("dot")[i].className="dot";
        }
        //设置活动 圆点
        console.log("sss"+index);
        $className("dot")[index].className="dot dot-active";
    }
    
    /**
     * 触摸事件
     */
    var startY;
    var startX;
    var startLeft;
    $id("slidet").ontouchstart=function(e){
        clearInterval(stop);
        $id("slidet").style.transitionDuration="0ms";
        //touchs 是一个长度为1 的数组
        var touch=e.touches[0];
        startX=touch.clientX;
    }
    $id("slidet").ontouchmove=function(e){
        e.preventDefault();
        var touch=e.touches[0];
        moveX=touch.clientX;
        var endX=-index*bd+moveX-startX;
        trans(endX);
    }
    $id("slidet").ontouchend=function(e){
        var val;
        var touch=e.changedTouches[0];
        endX=touch.clientX;
        val=startX-endX;
        $id("slidet").style.transitionDuration="300ms";
        if(Math.abs(val)>=bd/2){
            if(val>0){
                nextimg();
            }
            if(val<0){
                upimg();
            }
        }else{
            trans(-index*bd);
        }
        
        autoPage();
    }
}