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

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

javascript html

Javascript 显示一个图像，然后使用HTML显示另一个图像,javascript,html,Javascript,Html,我在其他地方问了一个类似的问题，但我试图在500毫秒后从一个图像切换到下一个图像。有人提供了这个答案，但代码只有在我在使用的网站的HTML和Javascript框中预览时才起作用（然后在启动它时什么也不显示）：转换 var图像=[]； var x=0； var$img=document.getElementById（“img”）；图像[0]=“image1.jpg”；图像[1]=“image2.jpg”；函数displayNextImage（）{ 如果（++x

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


转换
var图像=[]；
var x=0；
var$img=document.getElementById（“img”）；
图像[0]=“image1.jpg”；
图像[1]=“image2.jpg”；
函数displayNextImage（）{
如果（++x


有没有办法让它只在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>


转换
var图像=[]，x=0；
图像[0]=”http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
图像[1]=”http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
函数displayNextImage（）{
如果（++x图像.长度）{
document.getElementById（“img”）.src=images[x]；
设置间隔（displayNextImage，500）；
}
否则{
img.remove（）；
}
函数startTimer（）{
设置间隔（displayNextImage，500）；
}

另外，jQuery在我使用的站点上不起作用。
您从未真正调用startTimer
函数
在关闭脚本标记之前，尝试添加startTimer（）；

您的第一个代码在主体上有一个onload事件，它将执行您的函数
更新（displayNextImage（）中的if语句也缺少一个花括号）

var图像=[]，x=0；
图像[0]=”http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
图像[1]=”http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
函数displayNextImage（）{
如果（++x
您只需要调用startTimer（）
函数
了解
还请注意，您没有关闭displayNextImage（）
函数
将
代码块替换为以下代码块：
<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图像=[]，x=0；
图像[0]=”http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
图像[1]=”http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
函数displayNextImage（）{
如果（++x

以下是工作代码片段：

var-images=[]，x=0；
图像[0]=”http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
图像[1]=”http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
函数displayNextImage（）{
如果（++x

“但只有在我使用的网站的HTML和Javascript框中预览代码时，代码才起作用（然后在启动时什么也不显示）”这没有多大意义。你试过用开发工具调试代码吗？你没有在第二段代码中启动startTimer函数。是的，但我似乎不明白。我应该叫哪一行startTimer？我试着把它放在几个不同的地方，但什么都没有发生。更新了我的答案。你可以在声明映像数组后，将其放在任意位置（var）。
<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>

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