jquery图像交换功能中的损坏队列答案

【问题标题】：broken queue in jquery image swapping functionjquery图像交换功能中的损坏队列
【发布时间】：2016-12-03 12:05:19
【问题描述】：

我正在建立一个网站，该网站有一个带有一些图像变化的超大屏幕。我试图在互联网上寻找答案，但我找不到任何答案。另外，我知道答案会很简单，但我现在看不到。

问题是第一个图像交换顺利，第一个图像淡出，第二个淡入。但在此之后它就坏了。每次下一个图像交换都是这样的：当前图像开始淡出，但第二个同时淡入，这意味着有一段时间同时显示两个图像，并且它们下方的整个页面被向下推然后向上推。

$(document).ready(function(){

	window.setInterval(sliduh1, 3000);

	var slide = $('.activeSlide');

});

function sliduh1() {
		var currentSlide = $('.activeSlide');
		var nextSlide = currentSlide.next();

		if (nextSlide.length === 0 ) {
			nextSlide = $('.slide').first();
		}

		currentSlide.fadeOut(600).removeClass('activeSlide');
		nextSlide.fadeIn(600).addClass('activeSlide');
}

.slider1 img {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 650px;
}
.slide {
	display: none;
}
.activeSlide {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
	<div class="slide activeSlide">
		<img src="imgs/mobile1.png">
	</div>
	<div class="slide">
		<img src="imgs/blueprints1.jpg">
	</div>
	<div class="slide">
		<img src="imgs/tools1.png">
	</div>
	<div class="slide">
		<img src="imgs/sourceCode1.png">
	</div>
	<div class="slide">
		<img src="imgs/vr1.jpg">
	</div>
	<div class="slide">
		<img src="imgs/market1.png">
	</div>
</div>

【问题讨论】：

当你调用这个函数 sliduh1()。你能做一个小提琴吗？
我忘了在代码中显示函数用法。它现在添加到主帖中。
预期的行为是什么？图像同时淡入/淡出或仅在活动图像淡出后淡入下一张图像？如果是前者，则需要将图像位置设置为绝对位置。如果是后者，则需要使用完整的动画回调：currentSlide.fadeOut(600,function(){ $(this).removeClass('activeSlide'); nextSlide.fadeIn(600).addClass('activeSlide'); });
请注意，使用间隔是不好的，因为您不能依赖动画持续时间和间隔回调延迟。通常，最好在所有动画完成后递归地使用超时调用
预期的行为是后者，在第一张图像淡出之后，下一张淡入。我正在寻找一个图片库，其中只有一张图片会不断地换成另一张图片。

标签： javascript jquery html css image

【解决方案1】：

你在尝试这个吗？

    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);

fiddle link

【讨论】：

哦，是的。我没有把它放在帖子里。在我使用的主脚本中：window.setInterval(sliduh1, 3000);
你想达到这个目的吗？
我使用了你的解决方案，不幸的是它没有改变任何东西
确实如此，而且确实如此。在小提琴中我只能看到“图像”图像，所以很难说。但是我将您的差异引入了我的代码中，并且行为没有改变
你能做一个小提琴吗？

【解决方案2】：

我对 html 不是很好，但是如果将位置设置为固定，它会不会起作用？否则，您可以尝试为淡出过程添加另一个类（例如 fadeOutSlide）。或者将其设置为淡入另一张图片，而不是一张图片淡入和一张淡出。

【讨论】：

【解决方案3】：

A.沃尔夫用 cmets 回答了这个问题。答案是使用

        currentSlide.fadeOut(600, function(){ 
            $(this).removeClass('activeSlide'); 
            nextSlide.fadeIn(600).addClass('activeSlide'); 
        });

而不是

     currentSlide.fadeOut(600).removeClass('activeSlide');
     nextSlide.fadeIn(600).addClass('activeSlide');

【讨论】：