在jQuery图像交换功能中破坏队列
我正在构建一个网站,有一些图像变化的jumbotron。我试图在网上查找答案,但我找不到任何答案。另外,我知道答案很简单,但现在看不到它。在jQuery图像交换功能中破坏队列
问题是,第一个图像交换顺利,第一个图像淡出,第二个图像淡入。但在此之后它就会崩溃。每一个下一个图像交换都是这样的:当前图像开始淡出,但第二个图像同时淡入,这意味着一会儿有两个图像一次显示,下面的整个页面被按下然后向上。
$(document).ready(function(){
\t window.setInterval(sliduh1, 3000);
\t var slide = $('.activeSlide');
});
function sliduh1() {
\t \t var currentSlide = $('.activeSlide');
\t \t var nextSlide = currentSlide.next();
\t \t if (nextSlide.length === 0) {
\t \t \t nextSlide = $('.slide').first();
\t \t }
\t \t currentSlide.fadeOut(600).removeClass('activeSlide');
\t \t nextSlide.fadeIn(600).addClass('activeSlide');
}
.slider1 img {
\t position: relative;
\t display: block;
\t margin-left: auto;
\t margin-right: auto;
\t width: 650px;
}
.slide {
\t display: none;
}
.activeSlide {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
\t <div class="slide activeSlide">
\t \t <img src="imgs/mobile1.png">
\t </div>
\t <div class="slide">
\t \t <img src="imgs/blueprints1.jpg">
\t </div>
\t <div class="slide">
\t \t <img src="imgs/tools1.png">
\t </div>
\t <div class="slide">
\t \t <img src="imgs/sourceCode1.png">
\t </div>
\t <div class="slide">
\t \t <img src="imgs/vr1.jpg">
\t </div>
\t <div class="slide">
\t \t <img src="imgs/market1.png">
\t </div>
</div>
A.沃尔夫回答评论的问题。答案是使用
currentSlide.fadeOut(600, function(){
$(this).removeClass('activeSlide');
nextSlide.fadeIn(600).addClass('activeSlide');
});
,而不是
currentSlide.fadeOut(600).removeClass('activeSlide');
nextSlide.fadeIn(600).addClass('activeSlide');
我不是很好用HTML,但如果你设置的位置固定它wouldnt工作?否则,您可以尝试为淡出过程添加另一个类(ex fadeOutSlide)。或者将其设置为淡入另一张图片,而不是一张图片淡入淡出。
你想试试?
function sliduh1() {
var currentSlide = $('.activeSlide');
var nextSlide = currentSlide.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(0).removeClass('activeSlide');
nextSlide.fadeIn(600).addClass('activeSlide');
}
window.setInterval(function(){
sliduh1() ;
}, 5000);
哦,是的。我没有把它放在帖子里。在我使用的主要脚本中:\t window.setInterval(sliduh1,3000); –
你正试图达到这个目标? – vel
我用你的解决方案,不幸的是它并没有改变任何东西 –
当你调用这个函数sliduh1()。你能创造一个小提琴吗? – vel
我忘了在代码中显示函数的用法。它现在添加在主帖子中。 –
什么是预期行为?图像在相同时间内淡入/淡出,或仅在活动淡出后淡入下一图像?如果前者,您需要将图像位置设置为绝对。如果后面的,你需要使用完整的动画回调:'currentSlide.fadeOut(600,function(){ $(this).removeClass('activeSlide'); nextSlide.fadeIn(600).addClass('activeSlide '); }); ' –