使用轮播等下一个和上一个按钮创建菜单列表

Question

我正在尝试制作旋转木马，但我遇到了问题。

首先，当您继续单击“ Next按钮时，function 会继续工作，如果到达最后一项，它应该停止。 我不知道如何告诉 function 停止工作。 不过，我设法在上一个按钮中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() function 中的父宽度减去 slider 宽度来获得最大负边距。 区别在于您可以添加到 slider 的最大偏移量。

然后只需使用 Math.max 确保始终保持在此限制之上。 而对于另一端 - 不是高于 0 的 go - 使用 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;
});

Answer 2

这可能会帮助您解决使用“下一步”按钮遇到的问题。

 $(document).ready(function(){ $('#btn-nav-previous').click(function(){ $(".menu-inner-box").animate({scrollLeft: "-=100px"}); }); $('#btn-nav-next').click(function(){ $(".menu-inner-box").animate({scrollLeft: "+=100px"}); }); });

 nav#menu-container { background:#586e75; position:relative; width:100%; height: 56px; } #btn-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill:#FFF; } #btn-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill:#FFF; }.menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; }.menu { padding:0; margin: 0; list-style-type: none; display:block; text-align: center; }.menu-item { height:100%; padding: 0px 25px; color:#fff; display:inline; margin:0 auto; line-height:57px; text-decoration:none; text-align:center; white-space:no-wrap; }.menu-item:hover { text-decoration:underline; }.last-item{ margin-right: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav id="menu-container" class="arrow"> <div id="btn-nav-previous" style="fill: #FFF"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div id="btn-nav-next"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div class="menu-inner-box"> <div class="menu"> <a class="menu-item" href="#">Menu 1</a> <a class="menu-item" href="#">Menu 2</a> <a class="menu-item" href="#">Menu 3</a> <a class="menu-item" href="#">Menu 4</a> <a class="menu-item" href="#">Menu 5</a> <a class="menu-item" href="#">Menu 6</a> <a class="menu-item" href="#">Menu 7</a> <a class="menu-item" href="#">Menu 8</a> <a class="menu-item" href="#">Menu 9</a> <a class="menu-item" href="#">Menu 10</a> <a class="menu-item last-item" href="#">Menu 11</a> </div> </div> </nav>

请注意，我在last item class 中添加了边距。

归功于 Phppot 。

编辑：如果您无法将 class 添加到最后一项以在其上添加边距，则可以使用以下选择器。

:last-of-type
:last-child

例如

 .two:last-of-type{ color:red; } ul:last-child { color:green; } /*These match nothing:*/.one:last-of-type { color:pink; /*.. because li.one is not the last <li>*/ }.one:last-child { color: pink; /*.. because li.one is not the last child*/ }

 <ul class="test"> <li class="one">1</li> <li class="one">2</li> <li class="one">3</li> <li class="two">4</li> <li class="two">This is the last LI type</li> <dt>This is the last child</dt> </ul>