触摸滚动JQ

直接上代码

js

    var start=0,end=0,disy=0,disx=0;
    var items=$('.wrap li');
    var x=0;  // 保存下标
    document.addEventListener('touchstart',function (ev) { //当手指触摸屏幕时触发
        start={
            x:ev.touches[0].pageX,
            y:ev.touches[0].pageY    //鼠标到窗口+滚动条 距离
        }
        console.log(start)
    },false);
    document.addEventListener('touchmove',function (ev) { //当手指在屏幕上滑动时连续的触发
        end={
            x:ev.touches[0].pageX,
            y:ev.touches[0].pageY
        }
        console.log(end)
    },false);
    document.addEventListener('touchend',function (ev) { //当手指从屏幕上移开时触 发
        disy=end.y-start.y;
        disx=end.x-start.x;
        if (end!=0) {
            console.log(end.y);
            if(disy<(50)){
            console.log(x);
            if(x>=items.length-1){
                x=items.length-1;
                return false;
            }
            items.eq(x).slideUp(500,'swing');
            x++;
            end=0
        }else if(disy>50){
            x--;
            
            if(x<=0){
                x=0;
            }
            console.log(x);
            items.eq(x).slideDown(500,'swing');
            end=0
        }
        }
    },false);

html

<ul class="wrap">
    <li><img src="11.jpg" alt=""></li>
    <li><img src="k1.jpeg"></li>
    <li><img src="k4.jpg" alt=""></li>
    <li><img src="11.jpg" alt=""></li>
    <li><img src="k4.jpg" alt=""></li>
</ul>
<script src="jquery-3.2.2.min.js"></script> //引入JQ

css

//css
   *{margin:0; padding:0;}
    li{list-style: none;}
    html,body{
      height: 100%;
      overflow: hidden;
    }
    .wrap{
      height: 100%;
     }
     .wrap li{
        height: 100%;
     }
     .wrap li img{
        width: 100%;
        height: 100%;
     }