显示一个图像，然后使用 HTML 显示另一个图像

displaying one image, then another using HTML

本文关键字：显示 图像 HTML 另一个 然后 一个      更新时间：2023-09-26

我在其他地方问了类似的问题，但我试图在 500 毫秒后从一个图像切换到下一个图像。 有人提供了这个答案，但代码仅在我在正在使用的网站的 HTML 和 Javascript 框中预览它时才有效（然后在我启动它时不显示任何内容）： 

<html>
<head>
<title>switch</title>
<script type = "text/javascript">
var images = [];
var x = 0;
var $img = document.getElementById("img");
images[0] = "image1.jpg";
images[1] = "image2.jpg";
function displayNextImage() {
    if (++x < images.length) {
        $img.src = images[x];
        setInterval(displayNextImage, 500);
    }
    else {
        $img.remove();
    }
}
function startTimer() {
    setInterval(displayNextImage, 500);
}

</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>

有没有办法让它只在 HTML 中工作？ 我尝试这样做，但它只停留在第一张图片上：

<html>
<head>
<title>switch</title>
</head>
<body>
<img id="img" src="http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg"     
alt="" />
<script>
    var images = [], x = 0;
    images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
    images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
    function displayNextImage() {
     if (++x &lt; images.length) {
        document.getElementById("img").src = images[x];
        setInterval(displayNextImage, 500);
    }
    else{
        img.remove();
    }
     function startTimer() {
    setInterval(displayNextImage, 500);
    }
</script>
</body>
</html>

另外，jQuery在我正在使用的网站上不起作用。

你从来没有真正调用过startTimer函数。

尝试在关闭脚本标记之前添加startTimer();。

您的第一个代码在主体上有一个 onload 事件，该事件将执行您的函数。

更新（您在 displayNextImage（） 中的 if 语句上也缺少一个大括号）

<script type="text/javascript">
    var images = [], x = 0;
    images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
    images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
    function displayNextImage() {
      if (++x < images.length) {
        document.getElementById("img").src = images[x];
        setInterval(displayNextImage, 500);
      } else {
        img.remove();
      }
    }
    function startTimer() {
      setInterval(displayNextImage, 500);
    }
    startTimer();
</script>

你只需要调用startTimer()函数。

阅读有关 JavaScript 函数调用的信息。

另请注意，您错过了关闭displayNextImage()功能。

将<script>代码块替换为以下内容：

<script>
var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
function displayNextImage() {
  if (++x < images.length) {
    document.getElementById("img").src = images[x];
    setInterval(displayNextImage, 500);
  }
  else{
    img.remove();
  }
}
function startTimer() {
  setInterval(displayNextImage, 500);
}
startTimer();
</script>

以下是工作代码片段：

var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
function displayNextImage() {
  if (++x < images.length) {
    document.getElementById("img").src = images[x];
    setInterval(displayNextImage, 500);
  }
  else{
    img.remove();
  }
}
function startTimer() {
  setInterval(displayNextImage, 500);
}
startTimer();
<img id="img" src="http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg"     
alt="" />

相关文章：