顯示和改變圖像使用計時器的JavaScript

-2

images = ["image1.png","image2.png","image3.png","image4.png"]

我想顯示image1的一個JavaScript腳本頁面加載時，也使得對於每3秒在下一圖像數組顯示，因此替換以前的圖像。但是，當它到達image4時，將返回到image1。

編輯：正如有人問，這裏是到目前爲止我的代碼：

<html> 
<body> 
<body onload = "myFunction()"> 
<img src ="image1.png" id = "target" > 
<script> 
    var counter = 0; 
    var images = ["image1.png","image2.png","image3.png",image4.png"]; 
    function myFunction() { 
     counter += 1 
     if (counter > 4) { 
      counter = 0 
     } 
     target = document.getElementById ("target").src = images[counter] 
    } 
</script> 
</body> 
</html>

如果發現任何錯誤，請通知我。我曾嘗試setInterval然而它只是給我加載頁面時image1。在此先感謝。

來源

2017-03-17 A.Ridley

那麼，你嘗試過什麼？ –

你是否厭倦了像[SlidesJS]（http://www.slidesjs.com/） – thekodester

等任何插件請分享你已經嘗試過。如果你還沒有，在JavaScript中搜索'setInterval' ... – Rayon

我真的不喜歡爲什麼人們立即失望而不是提出解決方案。你有試過幻燈片嗎？！不，也許他不想使用別人的代碼，或者他不允許他的項目。

無論如何，首先你的圖片數組中有報價錯誤。最後一項缺少報價。

那麼你基本上可以加入類似

<script language="javascript"> 
    var counter = 0; 
    var images = ["image1.png", "image2.png", "image3.png", "image4.png"]; 

    function myFunction() { 
     counter++; 
     if (counter > 4) { 
      counter = 0 
     } 
     target = document.getElementById ("target").src = images[counter]; 
     setTimeout("myFunction", 3000) // 3sec 

    } 
    window.onLoad = function(){ 
     myFunction(); 
    } 
</script>

來源

2017-03-17 19:20:49

我不太喜歡當人們將個人投訴和投訴置於StackOverflow答案中。 – csmckelvey

謝謝，對你有好處！ –

謝謝。我知道我被告知要使用幻燈片，但是你說的是真的。我不允許複製別人的代碼。我唯一的來源是stackoverflow和w3schools。然而，我不得不求助於作爲w3chools的stackoverflow。再次謝謝你。 –

顯示和改變圖像使用計時器的JavaScript

回答

相關問題