は、4つの画像が

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#steps img{ 
    -webkit-transition: background-image 1.0s linear 0s; 
    transition: background-image 1.0s linear 0s; 
    float: left; 
    display: none; 
    height: 50px; 
    width: 50px; 
} 
</style> 
<script> 
var i = 0; 
var elem; 
function nextStep(){ 
    i++; 
    var img = document.createElement("img"); 
    img.src = "image"+i+".png" 
    img.width = "50px"; 
    img.height = "50px"; 
    img.id = "step" + i; 
    document.getElementById("steps").appendChild(img); 
    elem = document.getElementById(img.id); 
    elem.style.display = "inline-block"; 
    elem.style.opacity = "0"; 
    setTimeout(slide(),5000); 
} 
function slide(){ 
    elem.style.opacity = "1"; 
    if(i > 3){ 
    clearTimeout(slide()); 
    clearTimeout(nextStep()); 
    } 
    setTimeout(nextStep(),5000); 
} 
</script> 
</head> 
<body> 
    <h1>Steps</h1> 
    <div id="steps"> 
    <script> 
     nextStep(); 
    </script> 
    </div> 
    <p id="text"></p> 
</body> 
</html>

が、私は4枚の画像を持ってJavaScriptで効果をステップバイステップで表示すると、私が作成し、それらはCSS3の効果をステップバイステップで表示したい、それがDIVするIMGの子を作成しますNEXTSTEP（）関数を実行することで起動します表示と不透明度を変更します。そのslide（）が呼び出された後、不透明度が1に設定され、nextStep（）が再び呼び出されます。私は> 3私たちは表示を停止します。私はそれをテストするとき、それがどんな影響を受けることなく、即座に4枚の画像を表示するは、4つの画像が

EDIT：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#steps img{ 
    /* 
    -webkit-transition: background-image 1.0s linear 0s; 
    transition: background-image 1.0s linear 0s; 
    */ 
    float: left; 
    display: none; 
    height: 50px; 
    width: 50px; 
} 
</style> 
<script> 
var i = 0; 
var elem; 
//var slide; 
//var nextStep; 
function nextStep(){ 
    i++; 
    var img = document.createElement("img"); 
    img.src = "image"+i+".png" 
    img.width = "50px"; 
    img.height = "50px"; 
    img.id = "step" + i; 
    document.getElementById("steps").appendChild(img); 
    elem = document.getElementById(img.id); 
    elem.style.display = "inline-block"; 
    //elem.style.opacity = "0"; 
    setTimeout(slide(),2000); 
} 
function slide(){ 
    //elem.style.opacity = "1"; 
    if(i < 3){ 
    //clearTimeout(slide()); 
    //clearTimeout(nextStep()); 
    setTimeout(nextStep(),2000); 
    } 

} 
</script> 
</head> 
<body> 
    <h1>Steps</h1> 
    <div id="steps"> 
    <script> 
    document.onload = function(){ 
     nextStep(); 
    }; 
    </script> 
    </div> 
    <p id="text"></p> 
</body> 
</html>

出典

2016-04-18 spanpa

DOMが完全に上の任意の操作を行う前にロードするためには、常に待機しなければなりません。文書がロードされたときにスクリプトを実行するためにdocument.onloadを使用します。

<script> 
    document.onload = function(){ 
     nextSteps() 
    }; 
</script>

編集： あなたのコードでより多くの問題があります。ここではclearTimeout関数は必要ありません。また、あなたはそれを正しく使用していません。 W3Schoolsのにドキュメントからの引用：

てclearTimeout（）メソッドのsetTimeout（）方法で設定されたタイマをクリアします。

setTimeout（）によって返されるID値は、 clearTimeout（）メソッドのパラメータとして使用されます。

注：その後

myVar = setTimeout("javascript function",milliseconds); 機能が既に実行されていない場合、あなたがなり、：タイムアウトメソッドを作成する場合てclearTimeout（）メソッドを使用できるようにするために、あなたはグローバル変数を使用する必要があります。 clearTimeout（）メソッドを呼び出しての実行を停止することができます。

あなたのスライド機能、次のようになります。

function slide(){ 
    elem.style.opacity = "1"; 
    if(i < 3){ 
     setTimeout(nextStep,5000); 
    } 
}

編集2：

関数への参照を必要とsetTimeout、例えば機能の名前なしかっこ：

setTimeout(nextStep,5000);

nextStepは結果が

出典

2016-04-18 12:54:10 WirelessKiwi

（この場合は未定義）の実行後に機能によって機能
nextStep()への参照が返されている私はそれを置くものと答え、ありがとうございましたか！頭の中で？ – spanpa

' ' – WirelessKiwi

@Spanpaコード内の他の問題を解決するために私の回答を更新しました – WirelessKiwi

は、4つの画像が

答えて

関連する問題