删除轮播末尾的元素

Question

我在 jQuery 中创建了一个简单的轮播，通过单击“下一步”按钮运行一次 X 幻灯片。但是，这个按钮需要在最后一张幻灯片上消失，但我似乎无法让它工作。

我目前拥有的JSFiddle：https://jsfiddle.net/nvwmfe4t/

该按钮在某些时候确实会消失，但只有在您再次单击最后一张幻灯片上的“下一步”时才会消失。

代码：

var carousel = $("#wrap"),
                  slideWidth = 500,
                  nextBtn = $("#next"),
                  count = $("#wrap .section").length;

                $(nextBtn).click(function() {

                  var currentMargin = Math.abs(parseInt($(carousel).css('marginLeft'))),
                    maxMargin = slideWidth * count - slideWidth,
                    finalMargin = slideWidth * count - slideWidth;

                  $(this).css({
                    'pointer-events': 'none',
                    'opacity': '.5'
                  });
                  setTimeout(function() {
                    $(nextBtn).css({
                      'pointer-events': 'all',
                      'opacity': '1'
                    });
                  }, 500);

                  if (currentMargin + 100 <= maxMargin) {
                    $(carousel).css('margin-left', '-=' + slideWidth);
                  } else if (currentMargin == finalMargin) {
                    $(nextBtn).hide();
                  } else {
                    $(carousel).css('margin-left', '-=0');
                  }
                });

.window {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 500px;
  overflow: hidden;
}

#wrap {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 5000px;
  transition: all .5s;
}

.section {
  width: 500px;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0;
  color: white
}

#next {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  background-color: black;
  text-align: center;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="window">
  <div id="wrap">
    <div class="section" style="background-color: red;">
      1
    </div>
    <div class="section" style="background-color: orange;">
      2
    </div>
    <div class="section" style="background-color: yellow;">
      3
    </div>
    <div class="section" style="background-color: green;">
      4
    </div>
    <div class="section" style="background-color: blue;">
      5
    </div>
    <div class="section" style="background-color: purple;">
      6 - Button should be gone on this slide but instead only disappears on one more click
    </div>
  </div>
</div>
<span id="next">Next</span>

Answer 1

这基本上是因为在到达最后一张幻灯片的那一刻，currentMargin + 100 <= maxMargin 的if 语句仍然是正确的，因此负责隐藏按钮的else 语句将不起作用。您必须将 currentMargin == finalMargin 条件从 else if 移动到 if。此外，似乎需要将其更改为 currentMargin == finalMargin - 500 才能正常工作。

                var carousel = $("#wrap"),
                  slideWidth = 500,
                  nextBtn = $("#next"),
                  count = $("#wrap .section").length;

                $(nextBtn).click(function() {

                  var currentMargin = Math.abs(parseInt($(carousel).css('marginLeft'))),
                    maxMargin = slideWidth * count - slideWidth,
                    finalMargin = slideWidth * count - slideWidth;

                  $(this).css({
                    'pointer-events': 'none',
                    'opacity': '.5'
                  });
                  setTimeout(function() {
                    $(nextBtn).css({
                      'pointer-events': 'all',
                      'opacity': '1'
                    });
                  }, 500);

                  if (currentMargin + 100 <= maxMargin) {
                    $(carousel).css('margin-left', '-=' + slideWidth);
                  } else {
                    $(carousel).css('margin-left', '-=0');
                  }
                  if (currentMargin == finalMargin - 500) {
                    $(nextBtn).hide();
                  } 
                });

.window {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 500px;
  overflow: hidden;
}

#wrap {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 5000px;
  transition: all .5s;
}

.section {
  width: 500px;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0;
  color: white
}

#next {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  background-color: black;
  text-align: center;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="window">
  <div id="wrap">
    <div class="section" style="background-color: red;">
      1
    </div>
    <div class="section" style="background-color: orange;">
      2
    </div>
    <div class="section" style="background-color: yellow;">
      3
    </div>
    <div class="section" style="background-color: green;">
      4
    </div>
    <div class="section" style="background-color: blue;">
      5
    </div>
    <div class="section" style="background-color: purple;">
      6 - Button should be gone on this slide but instead only disappears on one more click
    </div>
  </div>
</div>
<span id="next">Next</span>