Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

Answer 2

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

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

2 个答案: