帮看看这段代码是哪出了问题

这段代码主要是用于实现在触屏手机上用手指切换图片的功能，现在有一个问题，当我点击第二张图片的时候，本应该跳转到一个链接，但是图片却滑动了，第一张和第三张都是好的，请问怎么解决，代码是哪出了问题？
<!doctype html>
<html lang="zh-cn">
<head>
    <style>
.focusPic{margin:1px auto 0;width:320px;overflow:hidden;height:160px;position:relative;}
.focusPic>div{height:160px;width:300%;-webkit-transition-property:-webkit-transform;-ms-transition-property:-ms-transform;}
.focusPic>div>div{float:left;position:relative;}
.desc{position:absolute;height:30px;width:100%;background:rgba(0,0,0,0.5);bottom:0;left:0;color:#ffffff;text-align:center;line-height:30px;}
    </style>
</head>
<body>
<div id="scroll" class="focusPic">
    <div style="left:0">    </div>
</div>
<script type="text/javascript">
        function Focus(obj){
            C = this;
            C.arg = obj;
            C.id = C.arg.id;
            C.innerWarp=C.id.getElementsByTagName(obj.tag)['0'];
            C.inhtml=[];
            C.creatHTML();
            C.current=0; //当前展示的图片
            //测试添加事件
            /*C.arg.left.addEventListener('click',function(e){
                e.preventDefault();
                C.scroll('l');
            },false);
            C.arg.right.addEventListener('click',function(e){
                e.preventDefault();
                C.scroll('r')
            },false);*/
        }        Focus.prototype={
            creatHTML:function(){
                objData= C.arg.data;
                C.innerWarp.style.width = objData.length+'00%';
                for(var i=0;i<objData.length;i++){
                    C.inhtml.push('<div><a href=\''+objData[i]['link']+'\'><img width="320" height="160"  alt="" src=\''+objData[i]['url']+'\' /></a></div>');
                }
                C.innerWarp.innerHTML =  C.inhtml.join('');
                C.touchFN();
            },
            applyStyle:function(node, properties){
                var p, s = node.style;
                for (p in properties){
                    s[p] = properties[p];
                }
            },
            animal:function(){
                warpLeft = parseInt(C.current)*320;
                C.applyStyle(C.innerWarp, {
                    "-webkit-transition-duration": '150ms',
                    "-webkit-transition-timing-function": 'ease-out'
                });
                C.innerWarp.style['-webkit-transform']='translate3d('+warpLeft+'px,0,0)';
            },
            scroll:function(dir){
                if(dir =='r' && Math.abs(C.current) > 0){
                    C.current++;
                }else if(dir=='l' && Math.abs(C.current) < C.arg.data.length-1){
                    C.current--;
                }else{
                    //alert('出错了')
                }
                C.animal();
            },
            touchFN:function(){
                var  startPos,moverPos,divStartpos;
                C.innerWarp.addEventListener('touchstart',function(e){
                    startTime = +new Date();
                    //触摸开始位置
                    startPos = parseInt(e.targetTouches[0].pageX);
                    var transform = C.innerWarp.style['-webkit-transform'] ? C.innerWarp.style['-webkit-transform'] : 'translate3d(0px,0,0)';
                    var translate3dLeft = transform.substring(transform.indexOf('(')+1,transform.indexOf(',')) ;
                    //将动画效果清除为无;
                    C.applyStyle(C.innerWarp, {
                        "-webkit-transition-duration": '',
                        "-webkit-transition-timing-function": ''
                    });
                    divStartpos = parseInt(translate3dLeft);
                },false);
                C.innerWarp.addEventListener('touchmove',function(e){
                    //触摸移动位置
                    moverPos = startPos - parseInt(e.targetTouches[0].pageX);
                    C.innerWarp.style['-webkit-transform']='translate3d('+(divStartpos - moverPos)+'px,0,0)';
                    e.preventDefault();
                },false);
                C.innerWarp.addEventListener('touchend',function(e){
                        if(Math.abs(moverPos) > 50){
                            C.scroll(moverPos > 0 ? 'l' : 'r');
                        }else{
                            C.animal();
                        }
                },false);
            }
        };
        var config ={
            id:document.querySelector('#scroll'),
            tag:'div',
            left:document.querySelector('#leftnav'),
            right:document.querySelector('#rightnav'),
            data:[
                {
                    'url':'http://auto.ce.cn/main/csjj/cspl/200804/18/W020080418369508593848.jpg',
                    'link':'http://www.baidu.com',
                    'alt':'美海岸警卫队击沉日本鬼船'
                },
                {
                    'url':'http://pic1.xcarimg.com/img/news_photo/2013/10/16/2ZmpbWmSGo5918.jpg',
                    'link':'http://www.google.com',
                    'alt':'安东尼19+8尼克斯送魔术5连败'
                },
                {
                    'url':'http://img2.cache.netease.com/auto/2013/10/9/2013100910213365c3c.jpg',
                    'link':'http://www.qq.com',
                    'alt':'美海岸警卫队击沉日本鬼船'
                }
            ]
        };
        new Focus(config);
    </script>
</body>
</html>
js图片滑动

解决方案 »

  1.   


    //是由于 moverPos 没清空上次的值导致的。C.innerWarp.addEventListener('touchstart', function (e) {
                        moverPos = 0;//这里！！！！！！！！！！！！！
                        startTime = +new Date();
                        //触摸开始位置
                        startPos = parseInt(e.targetTouches[0].pageX);
                        var transform = C.innerWarp.style['-webkit-transform'] ? C.innerWarp.style['-webkit-transform'] : 'translate3d(0px,0,0)';
                        var translate3dLeft = transform.substring(transform.indexOf('(') + 1, transform.indexOf(','));
                        //将动画效果清除为无;
                        C.applyStyle(C.innerWarp, {
                            "-webkit-transition-duration": '',
                            "-webkit-transition-timing-function": ''
                        });
                        divStartpos = parseInt(translate3dLeft);
                    }, false);
      

  2.   

    哦，明白了，非常感谢哈，我在点击的时候并没有触发touchmove事件，所以moverPos的值不会重新计算，但是为什么第一张和第三张图点击的时候没事呢？
      

  3.   

    哦，明白了，非常感谢哈，我在点击的时候并没有触发touchmove事件，所以moverPos的值不会重新计算，但是为什么第一张和第三张图点击的时候没事呢？
    如果你弄成 4张图  应该就能看出来为什么了。比如说。你操作的顺序。1 -> 2 -> 3  在第二张单击时，肯定会跳转到第三张。 当单击第三张时，应该是向第四张移动，但是没第四
    1 <- 2 <- 3  在第二张单击时，肯定会跳转到第一张。同理