JS实现点击拉拽轮播图pc端移动端适配

<div class="content">      <button class="left">left</button>      <button class="right">right</button>      <div class="index"></div>      <div class="lists">        <!--<!–width: item的数量÷3乘以100%–>-->        <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="static/images/search-icon.png"/>'+//             '<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;      }