Question

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

Answer 1

x > images.length应为x >= images.length。
setTimeout("imageChanger()", 3000);必须更改为setTimeout(imageChanger, 3000);

Answer 2

您在函数内部调用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更好的名称，但这取决于您！

Answer 3

你很亲密。你需要改变两件事。

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

imageChanger();

您的代码可以在那里工作。但是，不应该将字符串传递给setTimeout（），而应该传递对函数本身的引用：

setTimeout(imageChanger, 3000);

你应该全力以赴。如果您有问题，请告诉我。

Answer 4

删除

setTimeout("imageChanger()", 3000);

并添加

window.onload=function() {

  setInterval(imageChanger, 3000);
}

在功能之外

正如所指出的那样，改变＆gt;到＆gt; =

图像更改循环不起作用

4 个答案: