jquery 移动端轮播图

<div class="slide">
    <div class="slide-box">
        <ul class="slide-ul">
            <li><a href="" title="1111"><img src="http://www.heibaipig.com/demo/images/test/1.jpg"></a></li>
            <li><a href="" title="2222"><img src="http://0.thumb.pc6.com/up/2016-5/20165199297.jpg"></a></li>
            <li><a href="" title="33333"><img src="http://0.thumb.pc6.com/up/2016-4/201642814841.jpg"></a></li>
            <li><a href="" title="44444"><img src="http://m.pc6.com/public/img/20151202.jpg"></a></li>
        </ul>
    </div>
    <div class="title-box"><p class="title">1111</p><span class="circle"><em class="active"></em><em></em><em></em><em></em></span></div>
</div>

*{ padding:0; margin:0;}
/*.slide{position:relative}
.slide-box{height:100%; margin:0 auto;position:relative; overflow:hidden}
.slide ul{ position:absolute; left:0; top:0; width:100%; min-height:160px;}
.slide ul li{ float:left; list-style:none; position:relative}
.slide ul li img{ width:100%; height:100%;}*/

/* focus_pic */
.slide{clear:both;position:relative;z-index:0;width:100%;max-width:960px;max-height:480px;margin:0 auto 0.3em auto;overflow:hidden;}
.slide-box{ width:100%;height:100%; margin:0 auto;position:relative; overflow:hidden}
.slide .slide-ul{position:absolute;z-index:1;left:0;width:10000px;}
.slide .slide-ul li{float:left;display:block;}
.slide .slide-ul li img{display:block;width:100%;height:100%;}
.slide .title-box{ width:90%; padding:0 5%; z-index:999; height:30px; line-height:30px; color:#fff; font-size:14px; background:rgba(0,0,0,.5); position:absolute; left:0; bottom:0;}
.slide .circle{ float:right;}
.slide .title{ float:left; display:inline-block;}
.slide .circle em{ display:inline-block; width:5px; height:5px; margin-left:5px; background-color:#fff; border-radius:50%;}
.slide .circle .active{ background-color:#f00}

<script>
//自适应
function sizeShow(){
    var pic_w=$(window).width();
    var pic_h=pic_w*0.5;
    $(".slide").height(pic_h);
    $(".slide li").width(pic_w).height(pic_h);
    $(".slide ul").width(pic_w*4)
};

function scrollAuto(){
    sizeShow();
    $(window).resize(function(){sizeShow()});
    var oclass=$(".slide");
    var w=oclass.find("li").width();
    var iNow = 0, index = 1, timer = null;
    var touch={
            "s":[],
            "m":[],
            "e":[],
            "d":""
        };
    
    oclass[0].addEventListener('touchstart', function(e){
        touch.s[0] = e.targetTouches[0].pageX;
        touch.s[1] = e.targetTouches[0].pageY;
        touch.s[2] = (new Date()).getTime();
        clearInterval(timer)
    }, false);
    
    oclass[0].addEventListener('touchmove', function(e){
        var a=Math.abs(e.targetTouches[0].pageX-touch.s[0])
        var b=Math.abs(e.targetTouches[0].pageY-touch.s[1]);
        console.log("dMove:"+touch.d)
        if(a>=b && touch.d==""){
            touch.d=1;//左右
            //touch.m[0]=touch.s[0]
        }else if(touch.d==""){
            touch.d=0;//上下或者偏上下
        }
        console.log(a+":::"+b)
        if(touch.d==1){//左右滚动
           e.preventDefault();
            $(".slide ul").css({"left":-iNow*w+e.targetTouches[0].pageX-touch.s[0]});
           // touch.m[0]=e.targetTouches[0].pageX;
            //touch.m[1]=e.targetTouches[0].pageY;
        }
        
    }, false);
    
    oclass[0].addEventListener('touchend', function(e){
        console.log("dEnd:"+touch.d)
        if(touch.d==1){
            if((new Date()).getTime()-touch.s[2]>700){
                if(e.changedTouches[0].pageX-touch.s[0]>w/3){
                    auto("right")
                }else if(touch.s[0]-e.changedTouches[0].pageX>w/3){
                    auto("left")
                }else{
                    auto("reset")
                }
            }else{
                if(e.changedTouches[0].pageX>touch.s[0]){
                    auto("right");
                }else if(touch.s[0]>e.changedTouches[0].pageX){
                    auto("left")
                }
            }
        }
        touch.d="";
        timer=setInterval(function(){
            if(iNow>=$(".slide li").length-1){
                iNow=0;
            }else{
                iNow++
            }
            $(".slide ul").animate({"left":-w*iNow})
            $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
            $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
        },3000);
        
    }, false);
    
    function auto(c){
        if(c=="left"){
            if(iNow>=$(".slide li").length-1){
                iNow=$(".slide li").length-1
            }else{
                iNow++
            }
            console.log(iNow)
            $(".slide ul").animate({"left":-w*iNow})
        }else if(c=="right"){
            if(iNow<=0){
                iNow=0
            }else{
                iNow--
            }
            $(".slide ul").animate({"left":-w*iNow})
        }else if(c=="reset"){
            $(".slide ul").animate({"left":-w*iNow})
        }
        $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
        $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
    };
    
    timer=setInterval(function(){
        if(iNow>=$(".slide li").length-1){
            iNow=0;
        }else{
            iNow++
        }
        $(".slide ul").animate({"left":-w*iNow})
        $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
        $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
    },3000);
    
}
$(function(){
    scrollAuto();
})


</script>

实现效果：