移动端图片滑动

这是一个移动端的图片滑动，因为移动端的滑动带有弹性，所以pc端的滑动在移动端
很生硬。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style>
    body{
        margin: 0;
    }
    body,html{
        width: 100%;
        height: 100%;
    }
    ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #container{
        width: 100%;
        position: relative;
        overflow-x:hidden;
        height: 156px; 
    }
    #imgBox{
        position: absolute;
        top: 0;
        left: 0;
    }
    #imgBox li{
        float: left;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
    $(function(){
        switchImg("imgBox");
    })

    function switchImg(id){
        /*初始化*/
        var $imgBox=$("#"+id);
        var $img=$("img",$imgBox);
        $img.css("width",$("body").width());
        $imgBox.css("width",$img.width()*$img.length);
        /*获取图片width*/
        var imgWidth=$img.width();
        $imgBox[0].addEventListener("touchstart",myStart);
        var startPos=0,imgPos=0,num=0,startTime=0;
        function myStart(ev){
            startPos=ev.changedTouches[0].pageX;
            imgPos=parseFloat($imgBox.css("left"));
            //获取时间戳，单位毫秒
            startTime=Date.now();
            $imgBox[0].addEventListener("touchmove",myMove);
            $("body")[0].addEventListener("touchend",myEnd);
        }
        function myMove(ev){
            var movePage=ev.changedTouches[0].pageX;
            var moveDistance=(movePage-startPos)/3+imgPos;
            $imgBox.css("left",moveDistance);
        }
        function myEnd(ev){
            $("body")[0].removeEventListener("touchend",myEnd);
            $imgBox[0].removeEventListener("touchmove",myMove);
            var endPos=ev.changedTouches[0].pageX;
            var distance=endPos-startPos;
            if(Math.abs(distance)>$("body").width()/2||(Date.now()-startTime<100&&distance!=0)){
                if(distance<0){
                num=++num>$img.length-1?$img.length-1:num;
                }else{
                    num=--num<0?0:num;
                }
            }
            $imgBox.animate({"left":-num*$("body").width()},400);    
        }
    }
    </script>
</head>
<body>
    <!-- 编程就是和生活一样，只要观察生活中的细节，其实你就会发现生活很多逻辑和编程逻辑吻合 -->
    <!-- ios的滑屏 -->
    <!-- 1、使用到touchstart/touchmove/touchend,拖拉拽写法差不多 -->
    <!-- 2、如果想出现拖的位置和移动位置不符，只要移动位置减少即可，如除以3 -->
    <!-- 3、touchend是关键，图片移动需要它去判断，如ios手指抬起时所触发的各种可能，弹回，快速抬起的切换图片(使用时间确定速度)
    ,手指缓慢移动需要移动一半的屏幕才切换图片等等，还有切换到首张或末尾时弹回的
    还有使用运动函数，如jquery-》animate或别的库的运动函数
    还有解除touchmove的事件函数，
    还有event对象获取位置是event.changeTouches[0].pageX
    event.changeTouches获取手指列表和其操作。
     -->
     <div id="container">
         <ul id="imgBox">
             <li><img src="img/1.jpg" alt=""></li>
             <li><img src="img/2.jpg" alt=""></li>
             <li><img src="img/3.jpg" alt=""></li>
             <li><img src="img/4.jpg" alt=""></li>
         </ul>
     </div>
</body>
</html>