0

ヘッダー画像を 3 秒ごとに変更する JavaScript を作成しました。ページを開こうとしても、なぜか何も起こりません。

誰かが私が間違っていることを見ることができますか?

HTML:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="changeImage.js"></script>
        <title>Mikael Mattsson</title>
    </head>
    <body>
        <div class="header">
            <img id="headerImg" src="images/header-image.png" alt="Header image" width="100%" hight="100%">
        </div>
    </body>
</html>

JavaScript:

var images = [];
images[0] = "images/header-image.png";
images[1] = "images/header-image2.png";
var x = 0;
function imageChanger(){
    var img = document.getElementById("headerImg");
    img.src = images[x];
    x++;
    if (x > images.length){
        x = 0;
    }

    setTimeout("imageChanger()", 3000);
}
4

4 に答える 4

3
  1. x > images.lengthする必要がありますx >= images.length。
  2. setTimeout("imageChanger()", 3000);に変更する必要がありますsetTimeout(imageChanger, 3000);
于 2012-11-04T13:26:36.683 に答える
1

関数内で呼び出しますsetTimeoutが、関数を呼び出すことはありません。そのため、タイムアウトは設定されないため、タイムアウトを介して関数が呼び出されることはありません。

関数を繰り返し実行したいので、setInterval上記を使用することをお勧めします。setTimeoutまた、あなたが増加する方法を改善することができますx.

var x = 0;
function imageChanger() {
    var img = document.getElementById("headerImg");
    x = (x + 1) % images.length; // Make sure x is never larger than images.length
    img.src = images[x];
}

// Start calling the function after a delay of 3000ms
setInterval(imageChanger, 3000);​​​​

xまた、カウンター変数よりも適切な名前を使用することをお勧めしますが、それはあなた次第です!

于 2012-11-04T13:25:14.640 に答える
1

あなたは近くにいます。2 つのことを変更する必要があります。

まず、imageChanger 関数を少なくとも 1 回呼び出して、コードを開始する必要があります。スクリプトの最後に、次を追加します。

imageChanger();

あなたのコードはそこから機能するかもしれません。ただし、文字列を setTimeout() に渡す代わりに、関数自体への参照を渡す必要があります。

setTimeout(imageChanger, 3000);

あなたはすべて準備ができているはずです。問題がある場合はお知らせください。

于 2012-11-04T13:26:35.973 に答える
0

削除する

setTimeout("imageChanger()", 3000);

そして追加

window.onload=function() {

  setInterval(imageChanger, 3000);
}

関数の外

そして指摘されたように、 > を >= に変更します

于 2012-11-04T13:28:25.327 に答える