轮播图手机端不能手动滑动怎么解决

2021-10-13 11:08发布

13条回答
张皓铭
2021-10-15 09:34
 //定义起始为止的和结束位置变量    let start, end;
    function handleTouchEvent(event) {        //代表用户手指有触摸的状态,离开的时候状态touches的长度为0
        if (event.touches.length == 1) {            //获取当前位置(手指触摸的时候一直是触发的状态)
            let positionDom = event.touches[0].clientX;            
            switch (event.type) {                //手指放在一个DOM元素上
                case "touchstart":
                    console.log(positionDom);
                    start = positionDom;                    break;                //手指拖曳一个DOM元素
                case "touchmove":
                    console.log(positionDom);
                    end = positionDom;                    break;

            }
        }else if(event.touches.length == 0){            //手指从一个DOM元素上移开
            if(event.type == "touchend"){                
                //代表用户向上滑动
                if(end > start){                    //跳转到上一页
                    $("#carouselExampleCaptions").carousel('prev');
                }else if(end < start){                    //跳转到下一页
                    $("#carouselExampleCaptions").carousel('next');
                }
            }
            
        }
    }

    document.getElementById("carouselExampleCaptions").addEventListener("touchstart", handleTouchEvent, false);
    document.getElementById("carouselExampleCaptions").addEventListener("touchend", handleTouchEvent, false);
    document.getElementById("carouselExampleCaptions").addEventListener("touchmove", handleTouchEvent, false);

复制代码


一周热门 更多>