简单的手机页面触屏滚动

(function(){
        var oTabWrap = document.querySelector('#sigle_ul');
        var aSigles = oTabWrap.getElementsByClassName('sigle_page');
        var oPrev = document.querySelector('#js_prev');
        var oNext = document.querySelector('#js_next');
        var iNow = 0;
        var startX, startY, endX, endY;
        oTabWrap.style.width = aSigles[0].offsetWidth * aSigles.length + 'px';
        var oWinWidth = window.screen.availWidth;
        for(var i = 0; i<aSigles.length; i++){
                aSigles[i].style.width = oWinWidth +'px';
                var oImg = aSigles[i].getElementsByClassName('car_img')[0];
                //给图片添加事件，必须为绑定事件，如果强行加on来执行，并未发现效果
                oImg.addEventListener('touchstart', touchStart, false);
                oImg.addEventListener('touchmove', touchMove, false);
                oImg.addEventListener('touchend', touchEnd, false);
                function touchStart(event) {
                        var touch = event.touches[0];
                        startX = touch.pageX;
                        //设置阻止默认事件
                        event.preventDefault();
                        
                };
                function touchMove(event) {
                        var touch = event.touches[0];
                        endX = touch.pageX;
                        event.preventDefault();
                };
                function touchEnd(event) {
                        if(endX>startX){
                                prev()
                        }else{
                                next();
                        };
                        event.preventDefault();
                };
        };
        oPrev.onclick = prev;
        oNext.onclick = next;
        function prev(){
                iNow--;
                if(iNow < 0)
                {
                        alert('已经是第一张')
                        iNow = 0;
                        oTabWrap.style.left = 0;
                };
                startMove(oTabWrap,{left:-iNow *aSigles[0].offsetWidth })
        };
        function next(){
                iNow++;
                if(iNow > aSigles.length-1)
                {
                        alert('已经是最后一张');
                        iNow = aSigles.length-1;
                        oTabWrap.style.left = -iNow *aSigles[0].offsetWidth+'px'
                };
                startMove(oTabWrap,{left:-iNow *aSigles[0].offsetWidth })
        };
})();

只上js部分
剩余部分并未发布
总结：在使用html5做在手机上显示轮播图片的效果时突然遇到touchmove事件在touchstart事件之后只触发了一次touchmove之后和touchend一起触发了一次，咦，这是怎么回事？怎么不和mousemove一个道理呢，最后查了查资料是因为没设置事件阻止引起的。

touchstart:  // 手指放到屏幕上的时候触发 
touchmove:  // 手指在屏幕上移动的时候触发 
touchend:  // 手指从屏幕上拿起的时候触发 
touchcancel:  // 系统取消touch事件的时候触发

//返回的参数
client / clientY：// 触摸点相对于浏览器窗口viewport的位置 
pageX / pageY：// 触摸点相对于页面的位置 
screenX /screenY：// 触摸点相对于屏幕的位置 
identifier： // touch对象的unique ID 

本人参考的知识点：
http://www.cnblogs.com/sh_yao/archive/2013/09/11/3314921.html

http://www.cnblogs.com/win-and-first/p/3504933.html

http://www.2cto.com/kf/201402/276737.html

http://blog.youkuaiyun.com/jiangcs520/article/details/17564065

最后并未加上最后链接上的事件，感觉费劲。