时间戳

首页 > 解决方案 > jquery滑块在左侧不能很好地滑动

jquery - jquery滑块在左侧不能很好地滑动

问题描述

我想在我的项目中使用下面的代码创建一个无限的滑块。我希望滑块动画左侧与动画右侧相同。我尝试了很多方法来解决这个问题，但都没有成功。对于右键单击幻灯片动画，我必须使用 if 语句和 for 循环添加一些额外的幻灯片，使其成为 14 张幻灯片，这是右动画所需的最少幻灯片数。

我试图在左侧添加额外的幻灯片，但在将滑块滑动到右侧后，它就停止了一切。我希望它是一个无限的滑块，我被困在左侧。

HTML

$(document).ready(function(){

    var itemwidth = $('main ul li ').width() + 10;
    var movementwidth = itemwidth * 6;
    var length = $('main ul li').length;


    if (length <= 20) {

        for (var i = 0; i < 20 - length; i++) {
          if (i > 11) {
            $('main ul li:nth-child(-n+'+i+')').clone().appendTo('main ul');
          }
      }
    }

    $(".left").click(function(event) {
      $('main ul').animate({left:+movementwidth}, 500, function functionName() {
        $('main ul li:nth-last-child(-n+5)').prependTo('main ul');
        $('main ul').css('left', -itemwidth);
      });
    });

    $(".right").click(function(event) {
      $('main ul').animate({left:-movementwidth}, 500, function functionName() {
        $('main ul li:nth-child(-n+5)').appendTo('main ul');
        $('main ul').css('left', -itemwidth);
      });
    });

  });
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
  }

  main {
    min-width: max-content;
    height: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  ul {
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    background: green;
  }

  li {
    position: relative;
    background: red;
    width: 19.2vw;
    height: 19.99vw;
    margin: 0 7px;
  }

  li span {
    font-size: 4vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 2vw;
    height: 4vw;
  }

  main > div {
    font-size: 2vw;
    cursor: pointer;
    margin-right: 25px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  
  <ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
    <li><span>7</span></li>
  </ul>
  <div class="left">

  </div>
  <div class="right">

  </div>
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</main>

标签： jquery

解决方案

请检查以下 javascript。

$(document).ready(function(){
  var item_width = $('main ul li ').width() + 14;
  var length = $('main ul li').length;
  var move_count = 2;
  var movement_width = item_width * move_count;

  var cloneStr = $('main ul').html();
  $(cloneStr).appendTo('main ul');
  $(cloneStr).prependTo('main ul');
  $('main ul').css('left', -item_width * length );

  $(".left").click(function(event) {
    var moveRight = parseFloat( $('main ul').css('left') )  + movement_width;
    $('main ul').animate({left:moveRight}, 500, function functionName() {
      var rightElems = $('main ul li').slice( -move_count );
      rightElems.clone().prependTo('main ul');
      rightElems.remove();
      $('main ul').css('left', -item_width * length );
    });
  });

  $(".right").click(function(event) {
    var moveLeft = parseFloat( $('main ul').css('left') )  - movement_width;
    $('main ul').animate({left:moveLeft}, 500, function functionName() {
      var leftElems = $('main ul li').slice(0, move_count );
      leftElems.clone().appendTo('main ul');
      leftElems.remove();
      $('main ul').css('left', -item_width * length );
    });
  });

});

move_count 表示要移动的项目数。加载 html 后，将当前项目附加到之前和之后。因此， ul 将有 3 次项目。并且一旦执行了动画，前 n 个项目或最后 n 个项目将根据方向移动到最后一个或第一个。例如，如果向右移动，第一个 move_count 个项目将被移动到最后一个，当您单击向左时，最后一个 move_count 个项目将被移动到第一个。

更新： 新版本：

$(document).ready(function(){
    var item_width = $('main ul li ').width() + 14;
    var length = $('main ul li').length;
    var move_count = 2;
    var movement_width = item_width * move_count;

    var cloneStr = $('main ul').html();
    $(cloneStr).appendTo('main ul');
    $(cloneStr).prependTo('main ul');
    $('main ul').css('left', -item_width * length );

    $(".left").click(function(event) {
        moveTo( -move_count );
    });

    $(".right").click(function(event) {
        moveTo( move_count );
    });

    function moveTo( moveCount ){
        var moveLeft = parseFloat( $('main ul').css('left') )  - ( item_width * moveCount );
        $('main ul').animate({left:moveLeft}, 500, function functionName() {
            var moveElems;
            if ( moveCount > 0 ){
                moveElems = $('main ul li').slice(0, moveCount );  
                moveElems.clone().appendTo('main ul');  
            }else{
                moveElems = $('main ul li').slice( moveCount );
                moveElems.clone().prependTo('main ul');
            }
            moveElems.remove();
            $('main ul').css('left', -item_width * length );
        });
    }

});

推荐阅读