原生JS的滚动轮播(简单版)

//就是html结构
footerList.innerHTML = "<li class='swiperLi'>
<div class='swiper' id='swiper'>
    <ul class='swiperRes' id='swiperRes'>
        <li>1</li><li>7</li><li>8</li><li>10</li><li>11</li><li>12</li><li>13</li>
    </ul>
</div>
    <div id='leftBtn'><</div>
    <div id='rightBtn'>></div>
</div>
</li>"

//JS代码

mySwiper();
function mySwiper(){
            let swiper = document.getElementById('swiper');
            let swiperRes = document.getElementById('swiperRes');
            let swiperWidth = swiper.clientWidth;//外框的宽度
            let liWidth = swiperWidth/3;
            let listS = swiperRes.children;
            for (let i = 0; i < listS.length; i++) {
                listS[i].style.width = liWidth+"px";
            }
            let startX = 0;
            let moveX = 0;
            let offsetX = 0;
            let swiperNow = 0;//ul的位置(初始是0,后面累加)
            swiperRes.style.width =listS.length * liWidth + "px";//UL总长
            let swiperResWidth = swiperRes.clientWidth;
            let rightMax = swiperResWidth-swiperWidth;//右滑最大距离(ul总长-外层屏幕的宽度)
            let leftBtn = document.getElementById('leftBtn');
            let rightBtn = document.getElementById('rightBtn');
            //swiper滚动事件
            swiper.addEventListener('touchstart', function (e) {
                startX =e.targetTouches[0].clientX;
            });
            swiper.addEventListener('touchmove', function (e) {
                moveX = e.targetTouches[0].clientX;
                //手指的偏移量:
                offsetX = moveX - startX;
                if(offsetX < 0){
                    //手指右滑
                    swiperNow+=offsetX;
                    if(Math.abs(swiperNow)>rightMax){
                        swiperNow = -rightMax
                    }
                    swiperRes.style.transform = "translateX(" + swiperNow + "px)";
                }else if(offsetX > 0){
                    //手指左滑
                    swiperNow+=offsetX;
                    if(swiperNow>0){
                        swiperNow = 0;
                    }
                    swiperRes.style.transform = "translateX(" + swiperNow + "px)";
                }
            });
            //点击轮播事件
            leftBtn.onclick=function(){
                if(swiperNow===0){
                    return;
                }
                let starPos = swiperNow;
                //做一个处理:必须要让轮播滚动为li的整倍数(就会显示3个Li)
                swiperNow = (Math.floor(swiperNow/liWidth)+3)*liWidth;
                if(swiperNow>0){
                    swiperNow = 0;
                }
                animate(swiperRes,starPos,swiperNow)
                // swiperRes.style.transform = "translateX(" + swiperNow + "px)";
            };
            rightBtn.onclick=function(){
                if(swiperNow===rightMax){
                    return;
                }
                let starPos = swiperNow;
                // swiperNow-=liWidth*3;
                swiperNow = (Math.ceil(swiperNow/liWidth)-3)*liWidth;
                if(Math.abs(swiperNow)>rightMax){
                    swiperNow = -rightMax
                }
                animate(swiperRes,starPos,swiperNow)
                // swiperRes.style.transform = "translateX(" + swiperNow + "px)";
            };
        }
        //轮播的动画
        function animate(element,swiperNow, target) {
            //这个元素只能有一个定时器
            clearInterval(element.timerId);
            //给这个元素设置定时器
            element.timerId = setInterval(function () {
                //步进值
                let step =30;
                // swiperNow;//当前位置
                //若当前位置的距离大于目标位置的距离 step应该是-10
                if (swiperNow > target) {//0,-350
                    step = -step;
                }
                swiperNow += step;
                //停止
                if (Math.abs(swiperNow - target) <= Math.abs(step)) {
                    swiperNow = target;
                    clearInterval(element.timerId);
                    element.style.transform = "translateX(" + swiperNow + "px)";
                    return;
                }
                element.style.transform = "translateX(" + swiperNow + "px)";
            }, 16)
        }

//样式代码
/*轮播样式*/
.jx_footer .swiperLi{
    width: 100%;
    padding: 0 10%;
    position: relative;
}
.swiper{
    width: 100%;
    overflow: hidden;
    height: 1rem;
}
#leftBtn{
     position: absolute;
     top: 50%;
     left: 0.1rem;
    transform: translateY(-50%);
 }
 #rightBtn{
    position: absolute;
    top: 50%;
    right: 0.1rem;
    transform: translateY(-50%);
}
.swiper .swiperRes{
    /*width: 1000px;*/
    overflow:hidden;
    /*清除浮动*/
}
.swiper .swiperRes li{
    float: left;
}