使用 JavaScript 在 5 秒内更改 5 张图像

Changing 5 images in 5 seconds each using JavaScript

本文关键字：张图像 图像 JavaScript 使用      更新时间：2023-09-26

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

第 11 章的项目文件夹包含音乐会系列（音乐会 1.gif 到 音乐会5.gif的五个广告图片。创建一个脚本，该脚本循环浏览图像并显示每个图像五秒钟。将文档另存为 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>

我将不胜感激任何帮助，我真的很困惑。谢谢你的时间！

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 中的类似内容

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

所以它会像下面这样：

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

我试图弄清楚同样的事情。

相关文章：