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

Z时代
2024-01-10
分类：综合


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