html5触屏水平滑动广告

<!-- 这里是案例展示区 -->
    <div class="box">
    	<div class="title">案例鉴赏</div>
    	<div class="line"></div>
        <ul class="movebox" style="transition-duration:0.2s;transform: translateX(-0px);">
            <li ><img src="static/img/group/ChaoQunBingWu.png" /></li>
            <li ><img src="static/img/group/KangShenXiangYuan.png" /></li>
            <li ><img src="static/img/group/FenHuiShangMao.png" /></li>
            <li ><img src="static/img/group/CeHengCity.png" /></li>
            <li ><img src="static/img/group/HuiTongJiaZheng.png" /></li>
        </ul>
    </div>

window.onload = function () {
			
            var moveX, //手指滑动距离
            	number = 5,//图片张数
                endX, //手指停止滑动时X轴坐标
                cout = 0, //滑动计数器
                moveDir; //滑动方向
            var movebox = document.querySelector(".movebox"); //滑动对象
            var Li = movebox.querySelectorAll("li"); //滑动对象item
            var width = parseInt(window.getComputedStyle(movebox.parentNode).width); //滑动对象item的宽度 

            movebox.style.width = (width * number) + "px"; //设置滑动盒子width
            for (var i = 0; i < Li.length; i++) {
                Li[i].style.width = width + "px"; //设置滑动item的width，适应屏幕宽度
            }

            //触摸开始
            function boxTouchStart(e) {
                var touch = e.touches[0]; //获取触摸对象
                startX = touch.pageX; //获取触摸坐标
                endX = parseInt(movebox.style.webkitTransform.replace("translateX(", "")); //获取每次触摸时滑动对象X轴的偏移值
            }

            //手指水平方向移动
            function boxTouchMove(e) {
                var touch = e.touches[0];
                moveX = touch.pageX - startX; //手指水平方向移动的距离

                if (cout == 0 && moveX > 0) { //刚开始第一次向左滑动时
                    return false;
                }

                if (cout == number-1 && moveX < 0) { //滑动到最后继续向右滑动时
                    return false;
                }

                movebox.style.webkitTransform = "translateX(" + (endX + moveX) + "px)"; //手指滑动时滑动对象随之滑动
            }

            /**
             * 对手指滑动的效果，如果大于０向右，小于０向左，等于０不作为
             */
            function boxTouchEnd(e) {
                moveDir = moveX < 0 ? true : false; //滑动方向大于0表示向左滑动，小于0表示向右滑动
                //手指向左滑动
                if (moveDir) {

                    if (cout < number-1) {
                        movebox.style.webkitTransform = "translateX(" + (endX - width) + "px)";
                        cout++;
                    }
                    //手指向右滑动
                } else {
                    //滑动到初始状态时返回false
                    if (cout == 0) {
                        return false;
                    } else {
                        movebox.style.webkitTransform = "translateX(" + (endX + width) + "px)";
                        cout--;
                    }
                }
            }

            //滑动对象事件绑定
            movebox.addEventListener("touchstart", boxTouchStart, false);
            movebox.addEventListener("touchmove", boxTouchMove, false);
            movebox.addEventListener("touchend", boxTouchEnd, false);
        }