0

我是 JavaScript 新手，我不明白我应该如何在 5 个不同的 gif 图像之间进行更改。任务如下：

第 11 章的 Projects 文件夹包含音乐会系列的五个广告图像，从 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

所以它会像下面这样：

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

目前尚不清楚您是希望它们每个同时显示 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 
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 回答