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

我在别处问过类似的问题，但我试图在500毫秒后从一个图像切换到另一个图像。有人提供这样的答案，但代码只能当我预览它在我使用该网站的HTML和Javascript盒（然后显示，当我启动它没有）：显示一个图像，然后另一个使用HTML

<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的没有我使用的现场工作。

来源

2014-12-02 eesther

_“，但代码只能当我预览在我正在使用的网站的HTML和Javascript框中（然后在我启动时没有显示任何内容）“_这没什么意义。您是否尝试过使用开发人员工具调试代码？ – j08691 2014-12-02 17:15:07

你没有在第二块代码中触发'startTimer'函数。 – APAD1 2014-12-02 17:16:23

是的，但我似乎无法弄清楚。 – eesther 2014-12-02 17:19:48

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

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

你的第一个代码在body上有一个onload事件，它会执行你的函数。

UPDATE（你还缺少一个大括号在你的if语句中displayNextImage（））

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

来源

2014-12-02 17:15:08 vernak2539

我打电话给starttimer的哪一行？我试着把它放在几个不同的地方，但没有发生。 – eesther 2014-12-02 17:22:58

更新了我的答案。你可以在声明图像数组之后在技术上将它放在任何地方（var提升）。 – vernak2539 2014-12-02 17:26:02

你只需要调用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>

这里是工作的代码片段：

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="" />

来源

2014-12-02 17:20:57

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

回答

相关问题