Question

我现在真的在JS中苦苦挣扎。我今天花了几个小时改变代码进出，我无法让它工作：我知道数组或循环可能更好，但我甚至无法使基本代码立即工作。谢谢:)）

“使用五个图像;创建一个循环显示图像的脚本，使用setInterval显示每个图像五秒钟。”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="">

<head>
    <title>Concerts</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    /* <![CDATA[ */
    var curImage = "concert5";

    function bannerAd() {
        if (curImage == "concert1") {
            document.images[0].src= "images/concert2.gif";
            curImage = "concert2.gif";
        {

        if (curImage == "concert2") {
            document.images[0].src= "images/concert3.gif";
            curImage = "concert3";
        }

        if (curImage == "concert3") {
            document.images[0].src= "images/concert4.gif";
            curImage = "concert4";
        }

        if (curImage == "concert4") {
            document.images[0].src= "images/concert5.gif";
            curImage = "concert5";
        }

        if (curImage == "concert5") {
            document.images[0].src= "images/concert1.gif";
            curImage = "concert1";
        }
    }
/* ]]> */
</script>
</head>
<body onload= "curImage = setInterval('bannerAd()',5000);">
    <img src = ??? width="462" height="87" alt="Concert ads"/>
</body>
</html>

Answer 1

您可以大大清理代码：

var images = ['images/concert1.gif', 'images/concert2.gif', 'images/concert3.gif', 'images/concert4.gif', 'images/concert5.gif'];
var current = 3;

function rotate() {
    document.getElementById('image').src = images[current];
    current = (current + 1) % images.length;

}

window.onload = function() {
    rotate();
    setInterval(rotate, 5000);
}

此外，更改您的HTML。当元素具有id：

时，更容易定位元素

<img id="image" width="462" height="87" alt="Concert ads" />

Answer 2

document.images[1]将是文档中的第二个<img>标记，但您只有一个。我相信你在寻找document.images[0]。

Answer 3

您的代码存在许多问题。

您键入了curImage = "concert2.git";，然后仅针对"concert2"
JavaScript中的数组从0开始，您使用了document.images[0]
setInterval会返回您可以使用clearInterval
更多的是偏好，但CDATA黑客很古老，不再需要使用了。

这是我的建议：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="">

<head>
    <title>Concerts</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
    <img id="theImage" width="462" height="87" alt="Concert ads"/>

    <script type="text/javascript">
    var curImage = 5, theImage = document.getElementById('theImage');

    function bannerAd() {
        theImage.src = 'images/concert' + curImage + '.gif';
        curImage = curImage % 5 + 1;
    }
    bannerAd(); // Set theImage to the initial image, in this case, concert5.gif
    setInterval(bannerAd, 5000);
    </script>
</body>
</html>

注意我是如何将<script>标记移动到正文的底部的：这样我们的脚本执行时就已经加载了DOM文档。

还要注意如何不是手动检查concert1，concert2等，而是设置下一个，我存储一个数字而不是字符串并使用模运算符（％）。此运算符返回其余操作数（因此10％3将计算为1）。您可以使用它在某个点“包裹”一个数字。我使用它以便curImage进展1,2,3,4,5,1,2,3,4,5等等。

Answer 4

我和jss的新手一样，并且像迷宫一样令人困惑。这就是我们所建议的形式。它通过了W3C验证，但它没有在我的页面上显示任何imgs。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    </style>
    <title>Concert Series</title>
<script type="text/javascript">
/* <![CDATA[ */
var images = ['images/concert1.gif', 'images/concert2.gif', 'images/concert3.gif', 'images/concert4.gif', 'images/concert5.gif'];
var current = 3;

function rotate() {
    document.getElementById('image').src = images[current];
    current = (current + 1) % images.length;

}

window.onload = function() {
    rotate();
    setInterval(rotate, 5000);
}
/* ]]> */
</script>
</head>
<body>
<h1>Consert Series</h1>
<img src=concert1.gif/concert2.gif/concert3.gif/concert4.gif/concert5.gif id="image" width="462" height="87" alt="Concert ads" />
</body>
</html>

使用Javascript，setInterval循环浏览横幅广告

4 个答案: