javascript - 尝试使用无限循环进行水平滑动导航

Question

尝试使用无限循环的箭头进行常规水平导航。尝试弄清楚它以及一些我无法让它循环回到“所有”div 的方法。

尝试过 slick carousel，但在页面加载时出现此故障

HTML

   <div id="second-navigation">
    <div id="slider">
    <li><a href="#">All</a></li>
     <li><a href="#">slide1</a></li>
     <li><a href="#">slide2</a></li>
      </div>
       </div>

JS

  var W = $('#second-navigation').width();      
   var N = $('#slider li').length;   
    var C = 0;                          

   $('#slider').width( W*N );        

  $('#left, #right').click(function(){
  var myID = this.id=='right' ? C++ : C-- ;
  C= C===-1 ? N-1 : C%N ;
  $('#slider').stop().animate({left: -C*W }, 1000 );
  });

CSS

      #second-navigation{
      width:300px;
      height:150px;
      position:relative;
      overflow:hidden;

      }

      #slider{
       position:absolute;
       height:150px;
       left:0; 
       width:9999px;
        }

       #slider li{
       float:left;
        }

Answer 1

一种方法如下:

1. 单击方向按钮(即向左或向右)时，克隆将被动画移出 View 的列表项(即单击“向左”按钮时的 <li> 的第一个 <ul> )
2. 附上克隆的<li>到<ul>的另一端列表(即，当单击“左”时，首先将克隆的附加到 <ul> 的末尾
3. 为 <ul> 的边距设置动画隐藏原始元素 <li>被克隆(即对于“左”情况，将 <ul> 左边距设置为“-150 像素”，这是您的 <li> 元素的宽度)
4. 动画完成后，确保 <ul> margin 被重置，现在隐藏的 <li>元素已被删除

这可以用代码编写，如下所示。这里还有一些额外的事情:

• <ul>需要是 <li> 的直接父级元素(<div> 不能作为 <li> 元素的父级)
• Flex box用于实现<li>的水平布局元素，这简化了 CSS 样式
• 需要防止复合动画(即在现有动画期间发生按钮点击的情况)。下面，如果动画正在进行，我将忽略点击

$("#left").click(function() {

  /* If currently animated, early exit */
  if($("#second-navigation ul:animated").length) {
    return;
  }
  
  /* Clone the element that will be hidden */
  var firstClone = $("li:first-child").clone();
  
  $("#second-navigation ul")
    .animate({
      /* Animate ul container left margin to left */
      "marginLeft": "-150px"
    }, {
      done: function() {
        /* Reset ul container left margin */
        $(this).css("marginLeft", "0px");
        
        /* Remove element that is now hidden */
        $("li:first-child", "#second-navigation ul").remove();
      }
    })
    /* Add cloned element to end of list */
    .append(firstClone);

});

$("#right").click(function() {

  if($("#second-navigation ul:animated").length) {
    return;
  }
  
  var lastClone = $("li:last-child").clone();

  $("ul")
    .css({
      "marginLeft": "-150px"
    })
    .animate({
      "marginLeft": "0"
    }, {
      done: function() {
        $("li:last-child", "#second-navigation ul").remove();
      }
    })
    .prepend(lastClone);
});

#second-navigation {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 150px;
}

ul {
  display: flex;
  width: fit-content;
  flex-direction: row;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  height: 150px;
  width: 150px;
  top: 0;
  left: 0;
  transition: left ease-in-out 1s;
  background: linear-gradient(45deg, black, transparent);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="second-navigation">
  <ul>
    <li><a href="#">All</a></li>
    <li><a href="#">slide1</a></li>
    <li><a href="#">slide2</a></li>
  </ul>
</div>

<button id="left">Move left</button>
<button id="right">Move right</button>

希望这对您有所帮助!