使用javascript更改div背景圖像if/else

我想獲取div的背景圖像以間隔進行更改。我創建了一個包含圖像的數組，每隔幾秒，函數應該檢查數組長度的「x」值。如果X較小，則x將增加1，並且背景圖像將變爲陣列中的下一個圖像，否則它將設置x = 0並重新啓動該過程。 div和初始圖像顯示了我想要的，但沒有任何反應。使用javascript更改div背景圖像if/else

我知道有可能有更好的方法來做到這一點，但我對Javascript很新，想知道爲什麼這段代碼不起作用。先謝謝您的幫助！！

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 

     <title>ImageChanger</title> 

     <style type="text/css"> 

     #imagediv { 
      float:left; 
      border-style:ridge; 
      border-width:8px; 
      border-color:Green; 
      border-radius:15px; 
      width:1250px; 
      height:450px; 
      background-image:url(images/landscape1.jpg) 
     } 

     </style> 

     <script type="text/javascript"> 

      function displayNextImage() { 
      var x; 

      If (x<imageArray.length) { 
       x=x+1; 
       document.getElementById("imagediv").style.backgroundImage=images[x]; 
      } 
      else { 
       x=0; 
       document.getElementById("imagediv").style.backgroundImage=images[x]; 
      } 

      function startTimer() { 
        setInterval(displayNextImage, 3000); 
      } 

      var imageArray=new Array(); 
      images[0] = "images/landscape1.jpg"; 
      images[1] = "images/landscape2.jpg"; 
      images[2] = "images/landscape3.jpg"; 
      images[3] = "images/landscape4.jpg"; 

     </script> 
    </head> 

    <body> 
     <div id="imagediv"> 
     </div> 
    </body> 
</html>

來源

2015-05-22 Brian W Willmott

可能重複[如何使用JavaScript更改div的背景圖像？]（http://stackoverflow.com/questions/21496905/how-to-change-the-background-image-of-div-using-javascript） – Nitesh

學習在瀏覽器中使用JavaScript控制檯。它會將您指向錯誤的一般區域。缺少結束語}並在if上輸入錯誤。 – epascarello

代碼缺少一些大括號'修復'它 – ozil

If (x<imageArray.length) {..

應該

if (x<imageArray.length) {

JavaScript是case-sensitive。

你也有一些失蹤braces就像你不關閉

function displayNextImage() { ....

使用瀏覽器的控制檯進行調試。這些語法錯誤將顯示在那裏。

來源

2015-05-22 12:22:24 Zee

至於語法問題去：

由於@Zee指出，If應該小寫（if）
而且，@Zee和其他一些人說，你不關閉function displayNextImage() {與一個右大括號}。
您在函數中錯誤地定義了background-image屬性，而您在CSS塊中正確定義了它。您必須用url()包裝圖像名稱。
你永遠不會打電話給你的超時功能，startTimer。
您創建一個新的數組imageArray但然後使用一個未聲明的數組images

的

來源

2015-05-22 13:11:46 chazsolo

使用javascript更改div背景圖像if/else

回答

相關問題