0

我编写了一个 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

你很近。你需要改变两件事。

首先，您需要至少调用一次 imageChanger 函数来启动代码。在脚本的末尾，添加：

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 回答