顯示一個圖像，然後另一個使用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

回答

相關問題