首页 > 请问 各位我的这个滑动错哪了?感觉滑动好快呀~而且要滑动很长的距离才能 翻过去!??、

请问 各位我的这个滑动错哪了?感觉滑动好快呀~而且要滑动很长的距离才能 翻过去!??、

  .imgSwrap{
    width: 100%;
    overflow: hidden;
}

.imgUl{
    width: 400%;
    transform: translateX(0px);
}

.imgUl li{
    width: 25%;
    float: left;
}

.imgUl li img{
    width: 100%;
}

.imgUl:after{
    display: block;
    content: '';
    clear: both;
}
<div class="imgSwrap">
            <ul class="imgUl">
                <li class="imgLi"><img src="images/shangxian.jpg" alt=""></li>
                <li class="imgLi"><img src="images/shunfeng.jpg" alt=""></li>
                <li class="imgLi"><img src="images/ww.jpg" alt=""></li>
                <li class="imgLi" style=""><img src="images/shangxian.jpg" alt=""></li>
            </ul>
        </div>
(function(){
    var slide={};

    slide.index=0;

    slide.touchSlide=function(){

        var ulImg=document.getElementsByClassName('imgUl')[0];
        var imgLi=document.getElementsByClassName('imgLi');
        var startX;
        var moveX;
        var moveLength;
        var positionX=0;
        

        ulImg.addEventListener('touchstart',function(e){
            touch=e.touches[0];

            startX=touch.pageX;
            //console.log(X);
        });

        ulImg.addEventListener('touchmove',function(e){
            ulImg.style.transition='';

            touch=e.touches[0];

            moveX=touch.pageX;
            //console.log(endX);
            moveLength=Math.abs(moveX-startX);



            if((moveX-startX)<0){//往右;
                    moveLength=-moveLength;
            }

            if((moveX-startX)>0){//往左;
                    //moveLength=moveLength;
            }
            console.log(ulImg.style.transform);
            //console.log('translateX滑动前的距离'+positionX);
    

            positionX=(positionX+moveLength);

            
            ulImg.style.transform='translateX('+positionX+'px)';
    
            //console.log(startX+' '+moveX+' '+ moveLength+' ' +positionX);

            console.log('开始位置'+startX+' 结束位置'+moveX+' 滑动距离'+moveLength+' translateX滑动后距离'+positionX);
        });

        ulImg.addEventListener('touchend',function(e){
            var width=parseInt($('.imgUl li').css('width'));
            touch=e.touches[0];
            var endX=e.pageX;

            var percent=Math.abs(moveLength/width);

            if(percent>0.3){

                    if((moveX-startX)<0){
                        slide.index=slide.index-1;
                        if(slide.index<-imgLi.length-1){
                            slide.index=-imgLi.length-1;
                        }
                        console.log(slide.index);
                    }else{
                        slide.index=slide.index+1;
                        if(slide.index>0){
                            slide.index=0;
                        }
                        console.log(slide.index);
                    }

                    positionX=(width*slide.index);
                
            }else{
                    positionX=width*slide.index;
            }
            if(positionX>0){
                positionX=0
            }

            if(positionX<-parseInt(width)*(imgLi.length-1)){
                positionX=-width*(imgLi.length-1);
            }

            ulImg.style.transition=0.8+'s';
            ulImg.style.transform='translateX('+positionX+'px)';
        });

        window.onresize=function(){
            //alert(13);
            var width=parseInt($('.imgUl li').css('width'));
            positionX=width*slide.index;
            ulImg.style.transform='translateX('+positionX+'px)';
        }
    }

    /*slide.timer=function(){
        setInterval(function(){
            slide.index=slide.index-1;
            console.log(slide.index);
            
        },1000);
    }*/

    slide.infin=function(){
        this.touchSlide();
        //this.timer();
    }

    slide.infin();
})();

我觉得你计算滑动距离的方式有点小问题,一般的做法是计算是touchstart时触点的横竖坐标,然后touchend时计算出横竖坐标,通过end和start的坐标可以计算出滑动的角度,使用三角函数的tan来计算角度,如果角度大于某个值,比如15°那么我们认为它是向右滑动,以此类推。
另外你使用的是事件代理方式来做的,那么会出现这样的一个问题:有可能你在滑动的过程中的动作会触发多次的touchstart -》touchmove -》touchend 这些循环,特别是滑动很快的时候,滑动慢就不会出现这种问题,所以需要滑动很长距离才能有效也是由于这种情况造成的。

个人意见,仅作参考。希望对你有帮助。

【热门文章】
【热门文章】