在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圖像交換功能中破壞隊列

回答

相關問題