//就是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 startX = 0;
            let moveX = 0;
            let offsetX = 0;
            let swiperNow = 0;//ul的位置(初始是0,後面累加)
            let listS = swiperRes.children;
            let liWidth = listS[0].clientWidth;
            let swiperWidth = swiper.clientWidth;//外框的寬度
            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;
    width: 130px;
}