移動端圖片切換

標籤：

<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");    }}

 

移動端圖片切換