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;
            }