第2の画像を最初に表示するコード

違う信号を違う間隔で表示するこのコードを作った。それは動作しますが、コードを実行すると2番目の画像から開始します。第2の画像を最初に表示するコード

"red-yellow 2.jpg"

明らかに私の最初の画像から信号が欲しいと思っていますが、問題は何か分かりません。

コード：

<!DOCTYPE html> 
<html> 
<body> 

<h1>JavaScript Code</h1> 
<p>Traffic Light</p> 

<img id="traffic" src="only red1.jpg"> 
<button type="button" onclick="ChangeLight()">Change Light</button> 

<script> 
var list = [{ 
    src: "only red1.jpg", 
    interval: 10000 
}, { 
    src: "red-yellow 2.jpg", 
    interval: 5000 
}, { 
    src: "green3.jpg", 
    interval: 3000 
}, { 
    src: "yellowonly4.jpg", 
    interval: 1000 
}]; 

var nextlight = 0; 
var timer; 

function ChangeLight() { 
    nextlight = nextlight + 1; 
    if (nextlight == list.length) 
    nextlight = 0; 
    var firstlight = document.getElementById('traffic'); 

    var obj = list[nextlight]; 
    firstlight.src = obj.src; 
    //firstlight.alt = obj.src; 
    timer = setTimeout(ChangeLight, obj.interval); 
} 



ChangeLight(); 

</script> 

</body> 
</html>

出典

2017-03-25 asasas

初めて、 'VAR OBJ =リスト[nextlight]のようになりますnextlight' == 1 ... 2番目のライト（最初のものは少しでも目に見えるかもしれません） –

スクリプトタグの 'ChangeLight（）'が下部にあります。 –

'var nextlight = list.length - 1; –

をハイフン使用し、最終的なコードは、コードが実行される。この

function ChangeLight() { 
    if (nextlight == list.length) 
    nextlight = 0; 
    var firstlight = document.getElementById('traffic'); 
    var obj = list[nextlight]; 
    firstlight.src = obj.src; 
    nextlight = nextlight + 1; 
    //firstlight.alt = obj.src; 
    timer = setTimeout(ChangeLight, obj.interval); 
}

出典

2017-03-25 07:41:27 C2486

ええ、なぜですか？あなたはどうか説明できますか？ – asasas

処理する前に変数をインクリメント（ 'src'を設定）します。 – C2486

あなたの関数は、このようにする必要があり

、

function ChangeLight() { 

if (nextlight == list.length) 
nextlight = 0; 
var firstlight = document.getElementById('traffic'); 

var obj = list[nextlight]; 
firstlight.src = obj.src; 
//firstlight.alt = obj.src; 
timer = setTimeout(ChangeLight, obj.interval); 
nextlight++; 
}

出典

2017-03-25 07:30:30 User5590

これは愚かに聞こえるかもしれませんが、あなたは、これは可能性が

<img id="traffic" src="red1.jpg">

を試してみました "だけ" ことができるので、クラスとして考えることができます。も画像内のスペースを避けてください。 `` ...と、あなたがラインnextlight = nextlight + 1;を下に置く必要がある代わりに

出典

2017-03-25 07:34:13

これは実際には間違っています。 '' 'src'属性とクラス名の間には関係がありません。 – kennasoft

本当ですか！私が言っていることは、srcに空白を入れてはいけないということです。 –

あなたの主張をサポートしているHTML仕様は何ですか？ – kennasoft

第2の画像を最初に表示するコード

答えて

関連する問題