css部分

  html {
            font-size: 10vw;
        }

        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #wrap {
            position: relative;
            width: 100vw;
            overflow: hidden;
        }

        #list {
            float: left;
            display: flex;
            display: -webkit-box;
        }

        #list li {
            flex: none;
            width: 100vw;
        }

        #list img {
            width: 100%;
            display: block;
        }

        .nav {
            position: absolute;
            left: 0;
            bottom: .2rem;
            width: 100%;
            text-align: center;
            vertical-align: top;
        }

        .nav a {
            display: inline-block;
            width: .3rem;
            height: .3rem;
            background: #fff;
            margin: 0 .1rem;
            border-radius: .15rem;
            transition: .3s;
        }

        .nav .active {
            width: .6rem;
            color: #fff;
        }

        .textList {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .textList li {
            font: 14px/40px "宋体";
            padding-left: 20px;
            border-bottom: 1px solid #000;
        }

html部分

    <ul id="list">
        <li><img src="img/banner01.png" alt=""/></li>
        <li><img src="img/banner02.png" alt=""/></li>
        <li><img src="img/banner03.png" alt=""/></li>
        <li><img src="img/banner04.png" alt=""/></li>
    </ul>
    <nav class="nav">
        <a class="active"></a><a></a><a></a><a></a>
    </nav>
</div>
<ul class="textList"></ul>

js部分

 {
        let list = document.querySelector(".textList");
        list.innerHTML = [...(".".repeat(200))].map((item, index) => {
            return `<li>这是第${index}个li</li>`;
        }).join("");
    }

    {
        let wrap = document.querySelector("#wrap");
        let list = document.querySelector("#list");
        let navs = document.querySelectorAll(".nav a");

        let startTranslateX = 0;
        let startPointX = 0;
        let startPointY = 0;
        let offsetX = 0;
        let offsetY = 0;
        let offsetRange = wrap.clientWidth * .3;
        let pageW = wrap.clientWidth;
        let pageNumber = 0;

        let isFirst = true;
        let isMove = true;

        list.innerHTML += list.innerHTML;

        wrap.addEventListener("touchstart", (e) => {
            startPointX = e.changedTouches[0].pageX;
            startPointY = e.changedTouches[0].pageY;
            list.style.transition = "none";
            if (pageNumber === 0) {
                pageNumber = navs.length;
            } else if (pageNumber === navs.length * 2 - 1) {
                pageNumber = navs.length - 1;
            }
            startTranslateX = pageNumber * -pageW;
            list.style.transform = `translateX(${startTranslateX}px)`;
            isFirst = true; // 防止在安卓下，手指按下时，如果触摸面积比较大，容易误触 touchmove
            isMove = true; // 用于判断纵向还是横线滚动，是否move的是幻灯片
        });
        wrap.addEventListener("touchmove", (e) => {
            offsetX = e.changedTouches[0].pageX - startPointX;
            offsetY = e.changedTouches[0].pageY - startPointY;

            // 幻灯片横向滚动时，无法纵向触发浏览器默认滚动，反之亦然
            if (isFirst) {
                if (Math.abs(offsetX) - Math.abs(offsetY) > 5) {
                    isMove = true;
                    isFirst = false;
                } else if (Math.abs(offsetY) - Math.abs(offsetX) > 5) {
                    isMove = false;
                    isFirst = false;
                }
            }
            if (isMove) {
                e.preventDefault();
                if (!isFirst) {
                    list.style.transform = `translateX(${offsetX + startTranslateX}px)`;
                }
            }
            // 逻辑结束

        });
        wrap.addEventListener("touchend", (e) => {
            if (Math.abs(offsetX) > offsetRange) {
                pageNumber -= Math.abs(offsetX) / offsetX;
            }
            list.style.transition = ".3s";
            startTranslateX = pageNumber * -pageW;
            list.style.transform = `translateX(${startTranslateX}px)`;
            navs.forEach(v => {
                v.classList.remove("active");
            });
            navs[pageNumber % navs.length].classList.add("active");
        });
    }

注意事项

由于是移动端的demo所以要加上viewport才行

    <meta name="viewport" content="width=device-width, initial-scale=1.0">