javascript - 当我在 slider 末尾时如何禁用单击按钮

Question

这是我的代码，如果我在 slider 的末端，那么右键应该自动禁用，同样的事情应该发生在我在初始阶段意味着，如果我在“area1”，那么左箭头将不起作用如果我在“区域 8”，那么右箭头应该不起作用

$('.rightArrow').click(function(event) {
    $('.box').animate({'left' : "-=200px"});
});
$('.leftArrow').click(function() {
    $('.box').animate({'left' : "+=200px"});
});

.mainRow::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
    width: 0px;
    height: 0px;
}
.wrapper {
    position: relative;
}
.mainRow {

    overflow-x: scroll !important;
    border-collapse:separate;
    border-spacing:5px 0px;
}

.box {
    background: red;
    height: 100px;
    min-width: 200px;
    max-width: 200px;
    display: table-cell;
    animation: slideBox .5s;
    animation-fill-mode: forwards;
    position: relative;
}
.arrows {
    position: absolute;
    width: 100%;
    top: 0;
}
.leftArrow {
    position: absolute;
    left: -50px;
    top: 20px;
    font-size: 40px;
}
.rightArrow {
    position: absolute;
    right: -50px;
    top: 20px;
    font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
  <div class="mainRow">
      <div class="box">area 1</div>
      <div class="box">area 2</div>
      <div class="box">area 3</div>
      <div class="box">area 4</div>
      <div class="box">area 5</div>
      <div class="box">area 6</div>
      <div class="box">area 7</div>
      <div class="box">area 8</div>
  </div>
  <div class="arrows">
      <button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
      <button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
  </div>
</div>

Answer 1

固定

如果您计划更改正在使用的幻灯片数量，则可能不是最佳解决方案(但在这种情况下，您必须计算最大 left 可能以检查是否要是否走得更远)。

在更改位置之前添加对 position().left 的检查:

var truePosition = $('.box').position().left;
$('.rightArrow').click(function(event) {
    if(truePosition > -1415){
        truePosition -= 205;
        $('.box').animate({'left' : "-=205px"});
    }
});
$('.leftArrow').click(function() {
    if(truePosition < 20){
        truePosition += 205;
        $('.box').animate({'left' : "+=205px"});
    }
});

检查 jsfiddle 上的工作示例