删除旋转木马末尾的元素
删除旋转木马末尾的元素
提问于 2019-11-07 17:23:42
我已经在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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-07 17:37:04
这是因为在播放最后一张幻灯片的那一刻，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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58745559
复制相关文章
相似问题
腾讯云开发者
