-2

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

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

<!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>
4

4 回答 4

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" />
于 2012-10-23T21:21:33.063 回答
0

你的代码有很多问题。

  • 您输入curImage = "concert2.git";然后简单地测试"concert2"
  • JavaScript 中的数组从 0 开始，你使用document.images[0]
  • setInterval返回一个可以使用的数字clearInterval
  • 更多的是偏好问题，但 CDATA hack 是古老的，不再需要使用。

这是我的建议：

<!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 等等。

于 2012-10-23T21:35:27.793 回答
0

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

于 2012-10-23T21:18:45.840 回答
0

我和我刚接触 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>
于 2012-10-28T19:36:43.423 回答