-2

私は今、JSで本当に苦労しています。今日、コードの変更に数時間を費やしましたが、これを機能させることができません。配列またはループの方が優れていることはわかっていますが、現在、基本的なコードを機能させることさえできません。ありがとう ：）

「5 つの画像を使用します。画像を循環するスクリプトを作成し、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ハックは古く、もう使用する必要はありません。

これが私が提案するものです：

<!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と評価されます）。これを使用して、特定の時点で数値を「ラップ」することができます。1、2、3、4、5、1、2、3、4、5などのように使用curImageします。

于 2012-10-23T21:35:27.793 に答える
0

document.images[1]ドキュメントの 2 番目の<img>タグになりますが、1 つしかありません。を探していたと思いますdocument.images[0]。

于 2012-10-23T21:18:45.840 に答える
0

私はjssが初めてで、迷路のように混乱しているのと同じように苦労しています。これは、皆さんが推奨するものから得たものです。W3C 検証に合格しましたが、ページに画像が表示されません。

<!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 に答える