在jQuery图像交换功能中破坏队列

-1

我正在构建一个网站，有一些图像变化的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>

来源

2016-12-03 Aleksander Sadaj

当你调用这个函数sliduh1（）。你能创造一个小提琴吗？ – vel

我忘了在代码中显示函数的用法。它现在添加在主帖子中。 –

什么是预期行为？图像在相同时间内淡入/淡出，或仅在活动淡出后淡入下一图像？如果前者，您需要将图像位置设置为绝对。如果后面的，你需要使用完整的动画回调：'currentSlide.fadeOut（600，function（）{ $（this）.removeClass（'activeSlide'）; nextSlide.fadeIn（600）.addClass（'activeSlide '）; }）; ' –

-1

A.沃尔夫回答评论的问题。答案是使用

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

，而不是

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

来源

2016-12-03 13:12:02

-1

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

来源

2016-12-03 12:18:17 Hazzlarn

你想试试？

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

来源

2016-12-03 12:21:34 vel

哦，是的。我没有把它放在帖子里。在我使用的主要脚本中：\t window.setInterval（sliduh1，3000）; –

你正试图达到这个目标？ – vel

我用你的解决方案，不幸的是它并没有改变任何东西 –

在jQuery图像交换功能中破坏队列

回答

相关问题