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()功能。

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

喜欢这个

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{...}

查看代码段

$(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循环虽然元素;永远循环

1 个答案: