JQUERY 循环遍历元素；永远循环

Question

我正在尝试对一个练习进行排序，但我无法让它发挥作用。我正在尝试制作导航幻灯片（请参阅 JSFIDDLE：https://jsfiddle.net/ka8wmxy0/）；它完成了这项工作，但我想说“当它到达最后一个元素时，移动到开始”，因为此刻，你可以按下箭头，它会永远向左移动。

我试图遍历列表的所有元素，但我不知道如何正确构建函数。谁能帮我一把？

谢谢

html:

 <div class="DocumentList">
          <ul class="list-inline">
            <li class="DocumentItem">
              <a href="">
                <p>Manufracturer</p>
              </a>
            </li>
            <li class="DocumentItem">
              <a href="">
                <p>Customer 1st</p>
              </a>
            </li>
            <li class="DocumentItem">
              <a href="">
                <p>Excess</p>
              </a>
            </li>
            <li class="DocumentItem">
              <a href="">
                <p>Friendly Form</p>
              </a>
            </li>
            <li class="DocumentItem">
              <a href="">
                <p>FREE</p>
              </a>
            </li>
          </ul>
          <span id="arrow">ARROW</span>
        </div>

css:

.list-inline li {
  display:inline-block;
  border:1px solid pink;
}
.DocumentList {
  overflow-x:visible;
  width:200px;
  border:1px solid green;
}
.list-inline {
  white-space:nowrap;
}
#arrow {
  background-color:black;
  color:white;
  padding:2%;
}

js:

$(window).resize(function() {
  checkSize();
});

function checkSize() {
    var totalElements = ($(".DocumentItem").length)+1;
$('#arrow').click(function() {
   $(".list-inline").animate({'margin-left': '+=-50px'});
 });
    }


$(document).ready(function() {
       checkSize();
});

Answer 1

您必须将$("#arrow").click(function(){...}) 移出checkSize() 函数。

此外，您可以在.click() 函数中添加if 条件。

这样

if ($(".DocumentItem").last().offset().left <= 0) {
    $(".list-inline").animate({
      'margin-left': 0
    });
} else {
    $(".list-inline").animate({
      'margin-left': '+=-50px'
    });
}

如果您希望在没有“额外”点击的情况下重置列表，请将if 语句中的条件替换为以下

if($(".DocumentItem").last().offset().left - 50 <= 0){...}else{...}

看看sn-p

$(window).resize(function() {
  checkSize();
});

function checkSize() {
  var totalElements = ($(".DocumentItem").length) + 1;

}

$('#arrow').click(function() {
  if ($(".DocumentItem").last().offset().left <= 0) {
    $(".list-inline").animate({
      'margin-left': 0
    });
  } else {
    $(".list-inline").animate({
      'margin-left': '+=-50px'
    });
  }

});


$(document).ready(function() {
  checkSize();
});

.list-inline li {
  display: inline-block;
  border: 1px solid pink;
}
.DocumentList {
  overflow-x: visible;
  width: 200px;
  border: 1px solid green;
}
.list-inline {
  white-space: nowrap;
}
#arrow {
  background-color: black;
  color: white;
  padding: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DocumentList">
  <ul class="list-inline">
    <li class="DocumentItem">
      <a href="">
        <p>Manufracturer</p>
      </a>
    </li>
    <li class="DocumentItem">
      <a href="">
        <p>Customer 1st</p>
      </a>
    </li>
    <li class="DocumentItem">
      <a href="">
        <p>Excess</p>
      </a>
    </li>
    <li class="DocumentItem">
      <a href="">
        <p>Friendly Form</p>
      </a>
    </li>
    <li class="DocumentItem">
      <a href="">
        <p>FREE</p>
      </a>
    </li>
  </ul>
  <span id="arrow">ARROW</span>
</div>