Javascript - 循環3函數與每個函數之間的延遲

請 - 無jQuery。Javascript - 循環3函數與每個函數之間的延遲

函數1導致圖像出現（CSS3動畫）。

函數2然後在這張幻燈片的底部（CSS3動畫）上滑動一個標題。

功能3然後滑下標題（CSS3動畫）。

然後該過程需要重複。

我的問題：如何把這些功能放在一個連續的循環中，並在每個功能之間延遲。

HTML代碼

<div id="slider"> 

     <!-- Sildes 
      img_noshow means opacity:0;display:none; 
      img_show means opacity:1; 
      an_movein means a fade in effect CSS3 
     --> 
     <img id="img_1" class='img_show' src="/images/c1.jpg" style='width:960px;'/> 
     <img id="img_2" class='img_noshow' src="/images/c2.jpg" style='width:960px;'/> 
     <img id="img_3" class='img_noshow' src="/images/c3.jpg" style='width:960px;'/> 
     <img id="img_4" class='img_noshow' src="/images/c4.jpg" style='width:960px;'/> 
     <div id="slider_caption"> 
     <p id="slider_p1" class="an_slideup"><a href="#one">This is the text going with the slide 1.</a></p> 
     <p id="slider_p2" class="img_noshow"><a href="#one">This is the text going with the slide 2.</a></p> 
     <p id="slider_p3" class="img_noshow"><a href="#one">This is the text going with the slide 3.</a></p> 
     <p id="slider_p4" class="img_noshow"><a href="#one">This is the text going with the slide 4.</a></p> 
     </div> 
     </div>

JavaScript代碼

slide = 1;//global 
function nextMove(){ 
    slide++; 
    if(slide > 4){ 
    slide = 1; 
    } 
    //img_noshow means opacity:0;display:none; 
    //img_show means opacity:1; 
    //an_movein means a fade in effect 
    for(i=1;i<5;i++){ 

    document.getElementById('slider_p'+i).className = 'img_noshow'; 
    if(i != slide){ 
     document.getElementById('img_'+i).className = 'img_noshow'; 
    } 
    else{ 
     document.getElementById('img_'+i).className = 'an_movein'; 
    } 
    } 
} 


function nextMove2(){ 
    document.getElementById('slider_p'+slide).className = 'an_slideup'; 
} 

function nextMove3(){ 
    document.getElementById('slider_p'+slide).className = 'an_slidedown'; 
}

來源

2013-10-22 flukyspore

請注意。沒有「文字」字樣。輸入完整的單詞。 –

你在說什麼？ – flukyspore

@flukyspore：他正在談論寫作「請」而不是「請」。當你寫一個問題以便閱讀時，努力做出努力是很好的禮節。使用txtspk使你看起來更像是關心寫這個問題需要多長時間，而不是讓它成爲一個愉快的閱讀。然而，一個問題中的單個txtspk單詞幾乎不值得評論，那只是爲了通知您這段網絡禮儀供將來參考。 – Guffa

使用在每個功能的端部的setTimeout方法來啓動一個延遲之後的下一：

function nextMove(){ 
    //...all dat code 
    window.setTimeout(nextMove2, 500); 
} 

function nextMove2(){ 
    document.getElementById('slider_p'+slide).className = 'an_slideup'; 
    window.setTimeout(nextMove3, 500); 
} 

function nextMove3(){ 
    document.getElementById('slider_p'+slide).className = 'an_slidedown'; 
    window.setTimeout(nextMove, 500); 
}

來源

2013-10-22 16:38:09 Guffa

最字面示例：

setInterval(function() { 
    nextMove(); 
    setTimeout(function() { 
    nextMove2(); 
    setTimeout(nextMove3, 5000) 
    }, 5000); 
}, 15000);

所以每15秒就開始一次循環。執行第一個功能，等待5秒，執行第二個，等待5秒，然後執行第三個功能（之後，等待第一個功能~5秒）。

來源

2013-10-22 16:38:54

setInterval正在崩潰browser.Ideal是setInterval – underscore

Javascript - 循環3函數與每個函數之間的延遲

回答

相關問題