我已经在jQuery中创建了一个简单的轮播，只需单击“下一步”按钮，即可在X幻灯片中运行一次。但是，该按钮需要在上一张幻灯片上消失，但是我似乎无法使其正常工作。
JSF目前我所掌握的内容：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>