js點選拉拽輪播圖pc端移動端適配

<div class="content">
            <button class="left">left</button>
            <button class="right">right</button>
            <div class="index"></div>
            <div class="lists">
                <!--&lt;!&ndash;width: item的數量÷3乘以100%&ndash;&gt;-->
                <div class="box">
                    <!--width: 1÷item的數量乘以100%-->
                    <div class="item">
                        <img src="a.png" alt="a">
                        <p>aaa</p>
                    </div>
                    <div class="item active">
                        <img src="b.png" alt="b">
                        <p>bbb</p>
                    </div>
                    <div class="item">
                        <img src="c.png" alt="c">
                        <p>ccc</p>
                    </div>
                    <div class="item">
                        <img src="d.png" alt="d">
                        <p>ddd</p>
                    </div>
                    <div class="item">
                        <img src="e.png" alt="e">
                        <p>eee</p>
                    </div>
                    <div class="item">
                        <img src="f.png" alt="f">
                        <p>ffff</p>
                    </div>
                </div>
            </div>
        </div>

      <script>
            $(function(){
//                迴圈資料 假設有個陣列，有10條資料
//                 var arr = [1,2,3,4,5,6,7,8,9,10];
//                 var arr_len = arr.length;
//                 var box = `<div class="box" style="width: `+arr_len/3*100+`%;"></div>`;
//                 $(`.lists`).append(box);
//                 for (var i = 0; i < arr_len;i++){
//                     var newDiv = document.createElement(`div`);
//                     newDiv.innerHTML = `<img src=""/>`+
//                         `<p>` +
//                         (i+1)+
//                         `</p>`;
//                     newDiv.className = `item `+(i==1?`active`:``);
//                     newDiv.style = `width: `+1/arr_len*100+`%;`;
//                     newDiv.onclick =  (function(ind) {
//                         return function () {
//                             index = ind-1;
//                             console.log(ind)
//                             $(".box").animate({left: -index*100/3+"%"})
//                             $(".item").removeClass(`active`)
//                             $($(".item")[index+1]).addClass(`active`);
//                             $(`.index`).text(index+2)
//                         }
//                     })(i) ;
//                     $(`.box`).append(newDiv);
//                 }

                var arr_len = $(`.item`).length;

                $(`.box`).css({width: arr_len/3*100+`%`})
                $(`.item`).css({width: 1/arr_len*100+`%`})


                $(`.item`).on(`click`,function (e) {
                    var _this = $(e.target);
                    if (!_this.hasClass(`item`)){
                        _this = _this.parents(`.item`);
                    }
                    index = _this.index(`.item`)-1;
                    $(".box").animate({left: -index*100/3+"%"})
                    $(".item").removeClass(`active`)
                    $($(".item")[index+1]).addClass(`active`);
                    $(`.index`).text(index+2)
                })

                var index = 0;
                var len = arr_len;
                var temp = true;
                var pageX,pageY;
                $(`.content`).on(`touchstart`,function (e) {
                    var touches = e.originalEvent.targetTouches[0];
                    pageX = touches.pageX;
                    pageY = touches.pageY;
                }).on(`touchmove`,function (e) {
                    var touches = e.originalEvent.targetTouches[0];
                    if (pageX>touches.pageX+20){
                        left()
                    }else if (pageX<touches.pageX-20){
                        right()
                    }
                })
                $(".left").on(`click`,left)
                $(".right").on(`click`,right)
                function left() {
                    console.log(index,temp,`left`)
                    if (index < len-2&&temp){
                        index++;
                        move(index)
                    }
                }
                function right() {
                    if (index > 0&&temp){
                        index--;
                        move(index)
                    }
                }
                function move(index) {
                    if (temp){
                        temp = false;
                        var left = $(".box").offset().left;
                        $(".box").animate({left: -index*100/3+"%"},function () {
                            temp = true;
                        })
                        $(".item").removeClass(`active`)
                        $($(".item")[index+1]).addClass(`active`);
                        $(`.index`).text(index+2)
                    }

                }

            })

      .lists {
                position: relative;
                height: 100px;
                overflow: hidden;
            }
            .box {
                position: absolute;
            }
            .item {
                float: left;
                background: #008000;
                height: 100px;
            }
            .item img {
                width: 20px;
                display: block;
                margin: 0 auto;
            }
            .item p {
                text-align: center;
            }
            .item.active {
                background: #0000FF;
                font-size: 30px;
            }
            .item.active img {
                width: 40px;
            }
            .item.active p {
                font-size: 30px;
            }