ES6手写移动端轮播图滑动切换

备注：为了使大家更好的理解移动端，响应pc端的代码被删了，并且未做更多的简化以及合理的代码分配，还望谅解

//复制代码并运行即可显示效果

css样式：
        *{
            padding: 0;margin: 0;
        }
        .wrap{
            width:100%;
            min-width:320px;
            max-width:980px;
            height:200px;
            position:relative;
            overflow:hidden;
            margin:50px auto;
        }
        .wrap ul,.wrap ol {
            list-style:none;
        }
        .wrap ul{
            width:700%;
            height:100%;
        }
        .wrap ul li{
            width:20%;
            height:100%;
            float:left;
        }
        .wrap ol{
            width:100%;
            height:20px;
            position:absolute;
            top:160px;
            display:flex;
            justify-content: center;
        }
        .wrap ol li{
            width: 12px;
            height: 12px;
            border-radius:50%;
            background-color:white;
            float:left;
            margin:0 4px;
        }
        .wrap ol li.active{
            background-color: black;
        }


布局：
<div class="wrap">
    <ul>
        <li style="background:rgb(68, 0, 255);"></li>
        <li style="background:red;"></li>
        <li style="background:yellow;"></li>
        <li style="background:rgb(43, 235, 107);"></li>
        <li style="background:rgb(12, 138, 60);"></li>
        <li style="background:rgb(68, 0, 255);"></li>
        <li style="background:red;"></li>
    </ul>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

js代码：
let wrap = document.querySelector('.wrap');
let wrapul = wrap.querySelector('ul');
let ulchildren = wrapul.children;
let wrapol = wrap.querySelector('ol');
let list = wrapol.querySelectorAll('li');
console.log(wrap,wrapul,ulchildren,wrapol,list)
class Sport{
    constructor(wrap,wrapul,ulchildren,wrawpol,list){
        this.wrap = wrap;//最大父级
        this.wrapul = wrapul;//滚动父级
        this.ulchildren = ulchildren;//滚动父级内的li
        this.lengths = this.ulchildren.length;//滚动父级内的li的长度
        this.wrapol = wrapol;//小圆点的父级
        this.list = list;//所有小圆点
        this.length = this.list.length;//所有小圆点的长度
        this.currentIndex = 1;//初始化下标
        this.timer = null;//定时器
        this.wrapWidth = this.wrap.clientWidth;//最大父级的宽
        this.init();
        this.listIndex = 0;//初始化小圆点的下标
        this.touchX= 0;//触摸开始位置
        this.moveX = 0;//触摸结束位置
        this.deltaX = 0;//触摸开始位置 - 触摸结束位置
    }
    //初始化函数
    init() {
        this.Size();
        this.sport();
        this.touch();
        this.Resize();
    }
    //设置width和height
    Size() {
        for(let i = 0;i < this.ulchildren.length;i ++){
            this.ulchildren[i].style.width = this.wrapWidth+'px'
        }
        this.wrapul.style.width = this.wrapWidth * this.ulchildren.length + 'px'
        this.wrapul.style.transform = `translate(${-this.wrapWidth}px)`
    }
    Resize() {
        //在这里可以检测pc端时窗口width和height,从而重置所有的样式以此来响应pc端
        window.addEventListener('resize',() => {
            
        })
    }
    sport() {
        //定时器
        this.timer = setInterval(()=>{
            this.list[this.listIndex].classList.remove('active')
            this.currentIndex ++
            this.listIndex ++ 
            if(this.listIndex >= 5){
                this.listIndex = 0
            }
            this.list[this.listIndex].classList.add('active')
            this.wrapul.style.webkitTransition = 'transform 0.5s ease-in-out';
            this.wrapul.style.transform = `translate(${-this.wrapWidth*this.currentIndex}px)`
            if(this.currentIndex >= 6){
                this.currentIndex = 1
                setTimeout(()=>{
                    this.wrapul.style.webkitTransition = 'none';
                    this.wrapul.style.transform = `translate(${-this.wrapWidth}px)`
                },500)
            }
        },1000)
    }
    touch() {
        //触摸开始事件
        this.wrapul.addEventListener('touchstart',(ev)=>{
            clearInterval(this.timer)
            this.touchX = ev.touches[0].clientX
            wrapul.style.webkitTransition = 'none'
        })
        //触摸移动事件
        this.wrap.addEventListener('touchmove',(ev)=> {
            this.moveX = ev.touches[0].clientX;
            this.deltaX = this.moveX - this.touchX;
            this.wrapul.style.webkitTransform = 
            `translateX(${-this.wrapWidth * this.currentIndex + this.deltaX}px)`
        })
        //触摸结束事件
        this.wrap.addEventListener('touchend',(ev)=> {
            clearInterval(this.timer)
            this.sport();
            //如果触摸开始到移动结束，所移动的距离大于盒子wrap的一半,则wrapul移动一个wrap的距离，否则回到当前位置
            if(Math.abs(this.deltaX) >= this.wrapWidth/2){
                this.list[this.listIndex].classList.remove('active')
                if(this.deltaX <0){
                    this.listIndex ++
                    this.currentIndex ++
                    if(this.listIndex >= 5){
                        this.listIndex = 0
                        setTimeout(()=>{
                            this.wrapul.style.webkitTransition = 'none';
                            this.wrapul.style.transform = `translate(${-this.wrapWidth}px)`
                            this.currentIndex = 1
                        },500)
                    }
                    this.list[this.listIndex].classList.add('active')
                }else{
                    this.listIndex --
                    this.currentIndex --
                    if(this.listIndex < 0){
                        this.listIndex = 4
                        setTimeout(()=>{
                            this.wrapul.style.webkitTransition = 'none';
                            this.wrapul.style.transform = `translate(${-this.wrapWidth*5}px)`;
                            this.currentIndex = 5
                            console.log(this.currentIndex)
                        },500)
                        
                    }
                    this.list[this.listIndex].classList.add('active')
                }
                this.wrapul.style.webkitTransition = 'transform .4s ease-in-out'
                this.wrapul.style.webkitTransform = `translateX(${-this.currentIndex * this.wrapWidth}px)`
            }
            else{
                this.currentIndex = this.currentIndex;
                this.listIndex = this.listIndex;
                this.wrapul.style.webkitTransition = 'transform .4s ease-in-out'
                this.wrapul.style.webkitTransform = `translateX(${-this.currentIndex * this.wrapWidth}px)`
            }
        })
    }
}
new Sport(wrap,wrapul,ulchildren,wrapol,list);