移动端图片切换

<section id="tabPic">
            <ul id="picList">
                <li><img src="img/1.jpg" /></li>
                <li><img src="img/2.jpg" /></li>
                <li><img src="img/3.jpg" /></li>
                <li><img src="img/4.jpg" /></li>
                <li><img src="img/5.jpg" /></li>
            </ul>
            <section class="picMask">
                <p>成都九寨沟景区</p>
                <nav>
                    <a href="javascript:;" class="active"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </nav>
            </section>
</section> 


function bind(obj, ev, fn) { 
    if (obj.addEventListener) {
        obj.addEventListener(ev, fn, false);
    } else {
        obj.attachEvent('on' + ev, function() {
            fn.call(obj);
        });
    }
}
bind(document,"touchmove",function(ev){
    ev.preventDefault();
})
function fnTab(){
    var oTab=id("tabPic");
    var oList=id("picList");//图片
    var aNav=oTab.getElementsByTagName("nav")[0].children;//切换点
    var iNow=0;
    var iX=0;
    var iW=view().w;
    var iTimer=0;
    var iStartTouchX=0;
    var iStartX=0;
    bind(oTab,"touchstart",fnStart);
    bind(oTab,"touchmove",fnMove);
    bind(oTab,"touchend",fnEnd);
    auto();
    function fnStart(ev){
        oList.style.transition="none";
        oList.style.WebkitTransition="none";
        ev=ev.changedTouches[0];
        iStartTouchX=ev.pageX;
        iStartX=iX;
        clearInterval(iTimer);
    }
    function fnMove(ev){
        ev=ev.changedTouches[0];
        var iDis=ev.pageX-iStartTouchX;
        iX=iDis+iStartX;
        oList.style.WebkitTransform=oList.style.transform="translateX("+iX+"px)";
    }
    function fnEnd(){
        iNow=iX/iW;
        iNow=-Math.round(iNow);//用四舍五入判断图片是前进还是后退
        if(iNow<0){
            iNow=0;
        }
        if(iNow>aNav.length-1){
            iNow=aNav.length-1;
        }
        tab();
        auto();
    }
    function auto(){
        iTimer=setInterval(function(){
            iNow++;
            if(iNow>aNav.length-1){
                iNow=aNav.length-1;
            }
            tab();
        },2000);
    }
    function tab(){
        iX=-iNow*iW;
        oList.style.transition="0.5s";
        oList.style.WebkitTransition="0.5s";
        oList.style.WebkitTransform=oList.style.transform="translateX("+iX+"px)";
        for(var i=0;i<aNav.length;i++){
            removeClass(aNav[i],"active");
        }
        addClass(aNav[iNow],"active");
    }
}