在JS和HTML中使用數組循環圖片

這可以在點擊按鈕上工作，這就是它的意思。問題在於它使用隱藏圖像，而不是存儲在數組中的圖像。你能告訴我怎麼做，以便它是存儲在一個數組中的圖像。在JS和HTML中使用數組循環圖片

<!doctype html> 
<html> 
<body> 
    <div id="splash"> 
     <img src="TrafficLightRed.gif" alt="" id="mainImg"> 
    </div> 
    <div id="wrapper"> 
     <div> 
      <button id="clickme" onclick="changeLight();">Click to change</button> 
      <img src="TrafficLightRed.gif" hidden> 
      <img src="TrafficLightYellow.gif" hidden> 
      <img src="TrafficLightGreen.gif" hidden> 
     </div> 
    </div> 

    <script> 

     function changeLight() { 
      var currentImg = document.getElementById("mainImg"); 
      for(var i=1;i<3;i++) { 
       if(document.images[i].src == currentImg.src) { 
        currentImg.src = document.images[i + 1].src; 
        return; 
       } 
      } 
      currentImg.src = document.images[1].src; 
     } 
    </script> 
</body> 

</html>

來源

2015-11-17 Maximilian BELL

您將存儲圖像的src在一個數組：

imagesArray = ["TrafficLightRed.gif","TrafficLightYellow.gif","TrafficLightGreen.gif" ];

和使用document.images[i + 1].src到位數組：

... 
    for(var i=0;i<imagesArray.length;i++) { 
     if(imagesArray[i] == currentImg.src) { 
      currentImg.src = imagesArray[i]; 
      return; 
     } 
    } 
...

來源

2015-11-17 19:03:03

這應該做的工作：

... 
<script> 
    var images = ["TrafficLightRed.gif", "TrafficLightYellow.gif", "TrafficLightGreen.gif"]; 
    var currentIndex = 0; 

    function changeLight() { 
     var currentImg = document.getElementById("mainImg"); 
     currentImg.src = images[(currentIndex++) % images.length]; 
    } 
</script> 
...

現在，您可以將更多圖像添加到數組images，它將自動循環訪問該數組。

來源

2015-11-17 19:05:35

在JS和HTML中使用數組循環圖片

回答

相關問題