純粋なjavascriptの自動スライドショーに関する問題

Question

純粋なjavascriptでビルドして自動スライドショーで4枚の画像を表示しようとしています。 setInterval（）とsetTimeout（）関数は本当に私を混乱させます。

コードは最初の写真を表示してから3秒間待って最後の写真を表示してから終了します..... duno why ??

var divImages = document.getElementById("images"); 
var img1 = document.getElementById("img1"); //display:none using CSS 
var img2 = document.getElementById("img2"); //display:none using CSS 
var img3 = document.getElementById("img3"); //display:none using CSS 
var img4 = document.getElementById("img4"); //display:none using CSS 

window.addEventListener("load", getFirstImage); 


function getFirstImage(){ 
    img1.style.display = "block"; 
} 

function getSecondImage(){ 
    img2.style.display = "block"; 
    img1.style.display = "none"; 
} 
setTimeout(getSecondImage,3000); 

function getThirdImage(){ 
    img3.style.display = "block"; 
    img2.style.display = "none"; 
} 
setTimeout(getThirdImage,3000); 

function getFourthImage(){ 
    img4.style.display = "block"; 
    img3.style.display = "none"; 
} 
setTimeout(getFourthImage,3000); 

Answer 1

それは非常に簡単ですが、私はあなたが見るこの

setTimeout("alert('a')",3000) 
setTimeout("alert('b')",3000) 

を試す説明する前に？どちらも3秒後に正確に動作します。なぜですか？

setTimeoutsが

すなわち非同期であるので、あなたが尋ねます。 彼らはお互いを待ちません。javascriptインタプリタが最初のsetTimeoutを見ると、それは2番目のsetTimeoutを読み込むことを録音した後に "3秒後にやるべきこと"を記録します。これも同じリストに記録されます実際のポイントは、巨大なコード（k行のコードさえも）を2秒間に入れても、3秒後にも実行されるjTimeエンジンの信じられないほどのスピードにより、最後の2つのイベントの間にほとんどゼロ時間が経過していることですその理由は、4つすべてのスライド機能が、3秒後にsetTimeoutsの順番で実行された理由です。getFourthImage()が最後に実行されたため、その効果が最後に残りました。

どのようにカスケードしますか？前のスライド機能の中にスライドのsettimeoutを入れてください。アラームのようなものやリレーのようなものがあります。

window.addEventListener("load", getFirstImage); 


function getFirstImage(){ 
    img1.style.display = "block"; 
    setTimeout(getSecondImage,3000); 
} 

function getSecondImage(){ 
    img2.style.display = "block"; 
    img1.style.display = "none"; 
    setTimeout(getThirdImage,3000); 
} 


function getThirdImage(){ 
    img3.style.display = "block"; 
    img2.style.display = "none"; 
    setTimeout(getFourthImage,3000); 
} 

function getFourthImage(){ 
    img4.style.display = "block"; 
    img3.style.display = "none"; // last one no need to put anything but you can if you wish 
} 

Answer 2

<script type="text/javascript"> 
$("#slideshow > div:gt(0)").hide(); 
setInterval(function() { 
$('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, 1200); 
</script> 

私はあなたがgetElementByIdをを持っていることがわかり、私はあなたには、いくつかのHTMLを持っていると仮定していますか？ これは、スライドショー という名前のdivを持つと仮定したjqueryスクリプトです。div内にネストしたdivはスライドショーに表示されます。これが役立つことを願って

Answer 3

実用的な解決法があります。それが役に立てば幸い！

setInterval(miFuncion, 2500); 
 

 
var counter = 1; 
 

 
function miFuncion() 
 
{ 
 
    var elemento = document.getElementById("foto"); 
 

 
    if(counter === 0){ 
 
     elemento.src = "http://i2.cdn.cnn.com/cnnnext/dam/assets/141027105451-pkg-petroff-ferrari-sergio-elite-car-00014417-story-top.jpg"; 
 
    } 
 
    else if(counter === 1){ 
 
     elemento.src = "http://www.fashiontrends.pk/wp-content/uploads/2012/02/Porsche-Sports-Car.jpg"; 
 
    } 
 
    else if(counter === 2){ 
 
     elemento.src = "http://bestcarlive.com/wp-content/uploads/bmw-sports-car-wallpapers-20140720034912-53cb3c380a9cf.jpg"; 
 
    } 
 
    else if(counter === 3){ 
 
     elemento.src = "http://media.caranddriver.com/images/17q1/674191/2018-kia-stinger-sports-sedan-photos-and-info-news-car-and-driver-photo-674389-s-450x274.jpg"; 
 
     counter = -1; 
 
    } 
 
    ++counter; 
 
}

<img src="http://i2.cdn.cnn.com/cnnnext/dam/assets/141027105451-pkg-petroff-ferrari-sergio-elite-car-00014417-story-top.jpg" id="foto" width="100%" height="350">