滑动在电脑端和移动端事件是不一样的
电脑 mousedown,mousemove,mouseup ，而移动端 touchstart,touchmove,touchend

html css部分一样的

    <style>
        body{
            margin: 0;
            background: #fefefe;
        }
        .wrap{
            overflow: hidden;
            box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
            position: relative;
            background: #000;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list{
            display: flex;
            float: left;
        }
        .list img{
            width: 100vw;
            vertical-align: top;
            filter: saturate(2);
            user-select: none;
        }

        .dot{
            width: 100vw;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 20px;
        }
        .dot li{
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background: #fff;
            margin: 0 5px;
            transition: 0.2s;
            box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
        }

        .dot li.active{
            width: 20px;
        }
    </style>

<div class="wrap">
    <ul class="list"><!--图片列表-->
        <li class="item"><img draggable="false" src="./jjcr.jpg"></li>
        <li class="item"><img draggable="false" src="./timg.jpg"></li>
        <li class="item"><img draggable="false" src="./jjcr.jpg"></li>
        <li class="item"><img draggable="false" src="./timg.jpg"></li>
    </ul>
    <ul class="dot"><!--下面的小点-->
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

移动端

移动端比较常见

  {
        let wrap = document.querySelector('.wrap');//获取外框，以便设置图片滚动的宽度
        let list = wrap.querySelector('.list');//图片列表
        let dot = wrap.querySelectorAll('.dot li');//小点

        let startpoint = {};//鼠标按下的起始点
        let distaince = {};//距离
        let startOffset = 0;//记录鼠标按下时图片列表的位置
        let translatex = 0;//移动的距离
        let now = 0;//当前在那一张
        let imgW = wrap.offsetWidth;//获取一下外框的宽度
        let proportion = 0.3;//当图片拖动超过整体宽度的比例时，跳转到下一张或者上一章
        let isMove = false;
        list.innerHTML += list.innerHTML;//复制图片列表

        wrap.addEventListener('mousedown',(ev)=>{
            console.log('mousedown')
            let touch = ev;
            startpoint = {
                x:touch.clientX,
                y:touch.clientY
            }
            if(now == 0){
                now = dot.length;
            }else if(now == dot.length*2 -1){
                now = dot.length -1;
            }
            isMove = true
            translatex = now * -imgW;
            startOffset = translatex;
            list.style.transition = 'none';
            list.style.transform = `translateX(${translatex}px)`;
        })
        wrap.addEventListener('mousemove',(ev)=>{
            if(!isMove)return
            let touch = ev;
            distaince = {
                x:touch.clientX - startpoint.x,
                y:touch.clientY - startpoint.y
            }

            if(Math.abs(distaince.x) - Math.abs(distaince.y) > 5){
                isMove = true;
                ev.preventDefault();
            }else if(Math.abs(distaince.x) - Math.abs(distaince.y) < 5){
                // isMove = false;
            }

            if(isMove){
                translatex = startOffset + distaince.x;
                list.style.transform = `translateX(${translatex}px)`;
            }
        })


        wrap.addEventListener('mouseup',()=>{
            if(Math.abs(distaince.x) > imgW * proportion){
                now -= distaince.x/Math.abs(distaince.x);
            }
            Array.from(dot).forEach((item,index)=>{
                item.classList.remove('active');
                if(index === (now%dot.length)){
                    item.classList.add('active');
                }
            });

            if(isMove){
                translatex = now * -imgW;
                list.style.transition = '0.3s';
                list.style.transform = `translateX(${translatex}px)`;
            }
            isMove = false;
        })

        Array.from(dot).forEach((item,index)=>{
            item.onclick = function(ev){
                Array.from(dot).forEach((item)=>{
                    item.classList.remove('active');
                })

                now = index;
                this.classList.add('active');
                translatex = now * -imgW;
                list.style.transition = '0.3s';
                list.style.transform = `translateX(${translatex}px)`;
                ev.preventDefault();
            }
        })
    }