在下面的画廊中,除了单击上一个按钮外,一切正常。第一个图像消失并且按钮没有淡出!
演示:https://jsfiddle.net/ub56gs8y/2/
function checkIimg() {
if ($(".sample:first").hasClass("img-active")) {
$(".b1").fadeOut(100);
} else {
$(".b1").fadeIn(100);
}
if ($(".sample:last").hasClass("img-active")) {
$(".b2").fadeOut(100);
} else {
$(".b2").fadeIn(100);
}
}
checkIimg();
$(".buttons button").click(function() {
if ($(this).hasClass("b2")) {
$(".sample.img-active").fadeOut(100, function() {
$(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
checkIimg();
});
} else {
$(".sample.img-active").fadeOut(100, function() {
$(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
checkIimg();
});
}
});
.img-hidden {
display: none;
}
button {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-12 gallery-images">
<img src="https://placeimg.com/100/100/any" class="sample img-active" />
<img src="https://placeimg.com/100/100/nature" class="sample img-hidden" />
<img src="https://placeimg.com/100/100/arch" class="sample img-hidden" />
<img src="https://placeimg.com/100/100/animals" class="sample img-hidden" />
<img src="https://placeimg.com/100/100/people" class="sample img-hidden" />
<img src="https://placeimg.com/100/100/tech" class="sample img-hidden" />
</div>
<div class="buttons">
<button class="b1">previous</button>
<button class="b2">Next</button>
</div>
</div>
$(".buttons button").click(function() {
if ($(this).hasClass("b2")) {
$(".sample.img-active").fadeOut(100, function() {
$(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
checkIimg();
});
} else {
$(".sample.img-active").fadeOut(100, function() {
$(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
checkIimg();
});
}
});
最佳答案
您忘记将 img-hidden
类添加到隐藏图像中。
在选择元素后、淡入淡出之前添加:
$(".sample.img-active").addClass("img-hidden").fadeOut(...
完整示例:
function checkIimg() {
if ($(".sample:first").hasClass("img-active")) {
$(".b1").fadeOut(100);
} else {
$(".b1").fadeIn(100);
}
if ($(".sample:last").hasClass("img-active")) {
$(".b2").fadeOut(100);
} else {
$(".b2").fadeIn(100);
}
}
checkIimg();
$(".buttons button").click(function() {
if ($(this).hasClass("b2")) {
$(".sample.img-active").addClass("img-hidden").fadeOut(100, function() {
$(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
checkIimg();
});
} else {
$(".sample.img-active").addClass("img-hidden").fadeOut(100, function() {
$(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
checkIimg();
});
}
});
.img-hidden {
display: none;
}
button {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-12 gallery-images">
<img src="https://placeimg.com/100/100/any" class="sample img-active" />
<img src="https://placeimg.com/100/100/nature" class="sample img-hidden" />
<img src="https://placeimg.com/100/100/arch" class="sample img-hidden" />
<img src="https://placeimg.com/100/100/animals" class="sample img-hidden" />
<img src="https://placeimg.com/100/100/people" class="sample img-hidden" />
<img src="https://placeimg.com/100/100/tech" class="sample img-hidden" />
</div>
<div class="buttons">
<button class="b1">previous</button>
<button class="b2">Next</button>
</div>
</div>
关于jquery - 图片库按钮不会淡出并且图像消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58112444/