JQUERY 遍历元素；永远循环

Question

我正在尝试对一个练习进行排序，但无法完成。我正在尝试制作导航幻灯片（请参阅 JSFIDDLE：https://jsfiddle.net/ka8wmxy0/）；它完成了工作，但我想说 "when it arrives to the last element, move to the start"，因为此刻，您可以按箭头，它会一直向左移动。

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

谢谢

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'
    });
}

如果您希望在不单击 "extra" 的情况下重置列表，请将 if 语句中的条件替换为以下

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

看一下片段

$(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>

JQUERY 遍历元素；永远循环

JQUERY loop though elements; looping forever

jquery

loops

jquery-animate