【JavaScript】JS实现移动端上下滑动翻页，推荐使用Swiper轮播插件

<script type="text/javascript">
    //重要！禁止移动端滑动的默认事件
    document.body.addEventListener('touchmove', function (event) {
        event = event ? event : window.event;
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }, false);

    var pages = function (obj) {
        var box = document.getElementById(obj.wrap);
        var len = obj.len;
        var n = obj.n;
        var startY, moveY, cliH;
        //获取屏幕高度
        var getH = function () {
            cliH = document.body.clientHeight
        };
        getH();
        window.addEventListener('resize', getH, false);

        //touch事件绑定
        box.addEventListener("touchstart", function (event) {
            if (!event.touches.length) {
                return;
            }
            startY = event.touches[0].pageY;
            moveY = 0;
        }, false);
        box.addEventListener("touchmove", function (event) {
            if (!event.touches.length) {
                return;
            }
            moveY = event.touches[0].pageY - startY;
        }, false);
        box.addEventListener("touchend", function (event) {
            //位移小于+-50的不翻页
            if (moveY < -50) { n++; toPage(n, len); }
            if (moveY > 50) { n--; toPage(n, len); }
            if(n < 1) { n = 1 }
            if(n > len) { n = len }
            //toPage(n, len);
        }, false);
    };
    pages({
        wrap: 'box', //.box的id
        len: 4, //一共有几页
        n: 1 //页面一打开默认在第几页？第一页就是0，第二页就是1
    });

    function toPage(n, len) {
        if(n < 1 || n > len) { return; }
        console.log("共"+len+"页, "+"当前第"+n+"页");
        for (var i = 1; i <= len; i++) {
            var pageNum = "page"+i;
            var pageSum = document.getElementById(pageNum);
            if (i == n) {
                pageSum.style.display = "block";
            } else {
                pageSum.style.display = "none";
            }
        }
    }
</script>

   Swiper插件使用：https://www.swiper.com.cn/usage/index.html