Question

我在其他地方问过类似的问题，但我试图在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不会在我正在使用的网站上工作。

Answer 1

您实际上从未调用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>

Answer 2

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

了解JavaScript Function Invocation。

另请注意，错过了关闭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>

以下是工作代码段：

＆＃13;

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();

＆＃13;

<img id="img" src="http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg"     
alt="" />

＆＃13;

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

2 个答案: