javascript - 使用下一个和上一个按钮(如轮播)创建菜单列表

Question

我正在尝试制作轮播，但遇到问题。

首先，当您继续单击“下一步”按钮时，如果到达最后一项，该函数将继续工作，而应停止。我不知道如何告诉该功能停止工作。不过，我设法在 prev 按钮中做到了这一点。

其次，我需要它灵活，因为我不知道元素的宽度和数量。例如，如果只有两个元素，则不再需要按钮 Next 和 Prev，我希望它隐藏，或者类似元素不再适合的情况然后容器显示 Next 或 Prev 按钮。

$(document).ready(function() {
  var margin_left = 0;
  $('#prev').on('click', function(e) {
    e.preventDefault();
    if (margin_left != 0) {
      margin_left = margin_left + 190;
      $('ul#csx-chips-menu-slider').animate({
        'margin-left': margin_left
      }, 300);
    }
  });

  $('#next').on('click', function(e) {
    e.preventDefault();
    margin_left = margin_left - 190;
    $('ul#csx-chips-menu-slider').animate({
      'margin-left': margin_left
    }, 300);
  });
});

* {
  box-sizing: border-box;
}

.chips-slider-container {
  border: solid 1px;
  width: 100%;
  padding: 2px;
}

.chips-slider-parent {
  width: 100%;
  display: flex;
  border: solid 1px;
}

.chips-slider-parent .csx-chips-items {
  background-color: #CCCCCC;
  padding: 5px;
}

.chips-slider-parent .csx-chips-items:nth-child(2) {
  background-color: #DDDDDD;
  flex: 1;
  display: block;
  overflow-x: hidden;
}

.csx-chips-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

.csx-chips-menu li {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  border: solid 1px;
}

.csx-chips-sub-menu {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  padding: 0;
  margin: 0;
  margin-left: -11px;
  list-style: none;
}

.csx-chips-sub-menu li {
  display: block;
}

.csx-chips-menu li:hover>.csx-chips-sub-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chips-slider-container">
  <div class="chips-slider-parent">
    <div class="csx-chips-items">
      <a href="#" id="prev">PREV</a>
    </div>
    <div class="csx-chips-items">
      <ul class="csx-chips-menu" id="csx-chips-menu-slider">
        <li>
          <a href="#">Sample Menu 1</a>
          <ul class="csx-chips-sub-menu">
            <li><a href="#">Sample Sub Menu</a></li>
            <li><a href="#">Sample Sub Menu</a></li>
            <li><a href="#">Sample Sub Menu</a></li>
            <li><a href="#">Sample Sub Menu</a></li>
          </ul>
        </li>
        <li><a href="#">Sample Menu 2</a></li>
        <li><a href="#">Sample Menu 3</a></li>
        <li><a href="#">Sample Menu 4</a></li>
        <li><a href="#">Sample Menu 5</a></li>
        <li><a href="#">Sample Menu 6</a></li>
        <li><a href="#">Sample Menu 7</a></li>
        <li><a href="#">Sample Menu 8</a></li>
        <li><a href="#">Sample Menu 9</a></li>
        <li><a href="#">Sample Menu 10</a></li>
        <li><a href="#">Sample Menu 11</a></li>
      </ul>
    </div>
    <div class="csx-chips-items">
      <a href="#" id="next">NEXT</a>
    </div>
  </div>
</div>

Answer 1

这是我通常的做法:

通过在 getMaxMargin() 函数中从父宽度中减去 slider 宽度来获取最大负边距。区别在于您可以添加到 slider 的最大偏移量。

然后只需使用 Math.max 即可确保始终保持在该限制之上。对于另一端 - 不超过 0 - 使用 Math.min。所以整个魔力就是这一行: margin_left = Math.min(0, Math.max( getMaxMargin(), margin_left + amount ))

$(document).ready(function() {

  var margin_left = 0;

  $('#prev').on('click', function(e) {
    e.preventDefault();
    animateMargin( 190 );
  });

  $('#next').on('click', function(e) {
    e.preventDefault();
    animateMargin( -190 );
  });

  const animateMargin = ( amount ) => {
      margin_left = Math.min(0, Math.max( getMaxMargin(), margin_left + amount ));
      $('ul#csx-chips-menu-slider').animate({
        'margin-left': margin_left
      }, 300);
};

  const getMaxMargin = () => 
    $('#csx-chips-menu-slider').parent().width() - $('#csx-chips-menu-slider')[0].scrollWidth;
});