0

私は JavaScript が初めてで、5 つの異なる gif 画像をどのように変更すればよいのかわかりません。割り当ては次のとおりです。

第 11 章のプロジェクト フォルダには、コンサート シリーズの 5 つの広告イメージ、concert1.gif から Concert5.gif が含まれています。画像を循環して各画像を 5 秒間表示するスクリプトを作成します。ドキュメントを ConcertAds.html として保存します。

これまでのコードは次のとおりです。

<!DOCTYPE HTML>
<html>
<head>
<title>Concert Ads</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/* <![CDATA[ */
var concertads = new Array(5);
    concertads[0] = new Image();
    concertads[1] = new Image();
    concertads[2] = new Image();
    concertads[3] = new Image();
    concertads[4] = new Image();

    concertads[0].src = "concert1.gif";
    concertads[1].src = "concert2.gif";
    concertads[2].src = "concert3.gif";
    concertads[3].src = "concert4.gif";
    concertads[4].src = "concert5.gif";
var completeAds;
var currImgIndex = 0;
var maxImgIndex = concertads.length-1; 
function concertAd() {
    if (completeAds) {
        completeAds.src = concertads[0].src;
        ++currImgIndex;
    if (currImgIndex > maxImgIndex) {
        currImgIndex = 0;
    }
}
}
function initImgCycle(adsID) {
    completeAds = document.getElementByID(adsID)
    if (completeAds) {
        setInterval("cycle()", 5000);
        }
    }
/* ]]> */
</script>
</head>
<body onload="initImgCycle('adBanner');">
<img src="concert1.gif" id="adBanner" alt="Concert Ads" />
</body>
</html>

助けていただければ幸いです。本当に混乱しています。お時間をいただきありがとうございます！

4

3 に答える 3

0

それぞれを5秒間同時に表示するのか、それとも5秒間次々に表示するのかは明確ではありません。私は最初のものと一緒に行きました。

(function() {

  var images = [
    new Image(), new Image(), new Image(), new Image(), new Image()
  ];

  images[0].src = 'http://bit.ly/sbK2Ub';
  images[1].src = 'http://bit.ly/lMMo0n';
  images[2].src = 'http://bit.ly/LFtGyc';
  images[3].src = 'http://bit.ly/MY3skL';
  images[4].src = 'http://bit.ly/M8iQk3';

  function show( elem ) {
    document.body.appendChild( elem );
  }
  function remove( elem ) {
    document.body.removeChild( elem );
  }

  window.onload = function() {
    images.forEach(function(a, b) {
      show( images[b] );
    });

    window.setTimeout(function() {
      images.forEach(function(a, b) {
        remove( images[b] );
      });
    }, 5000);

  };

})();

さまざまな画像を使用したデモを次に示します（[レンダリング]をクリックしてコードを実行します）：http：//jsbin.com/akoqek/2/edit

于 2012-06-28T13:07:11.870 に答える
0

したがって、以下のようなものになります。

`<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    </style>
    <title>Goselin Greeting cards</title>
<script type="text/javascript">
/* <![CDATA[ */
imgCounter=0;
    function cycle(){
            if(imgCounter<5){
            imgCounter++;
        document.getElementById("imgX").src="concert" + imgCounter + ".gif";    
            setTimeout("cycle();", 5000);
    }
}

/* ]]> */
</script>
</head>
<body onload="initImgCycle('adBanner');">
<h1>Consert Series</h1>
<img id="imgX" src="" alt="img"/>
</body>
</html>

私は同じことを理解しようとしています。

于 2012-10-28T19:20:17.360 に答える
0 
imgCounter=0;

function cycle(){
    if(imgCounter<5){
    imgCounter++;
    document.getElementById("imgX").src="concert" + imgCounter + ".gif";    
    setTimeout("cycle();", 5000);
    }
}
cycle();

持っていることを確認してください

<img id="imgX" src="" alt="img"/>

またはhtmlで同様のもの

于 2012-06-28T13:20:47.893 に答える