我目前正在製作一個帶有div標籤內部圖像的網頁。我在一段時間後編寫了一個腳本來改變圖像，但是當我單獨測試腳本時，它運行正常，但是;當我嘗試將腳本放入我的網頁中時，它不會更改圖像。JavaScript在一定時間後更改div中的圖像

這裏是我的腳本代碼：我有一個div標籤的內部測試，這個腳本與圖像

<!DOCTYPE html> 
<html> 
    <body> 
     <script> 
      images = new Array; 
      images[0] = "img2.gif"; 
      images[1] = "img3.gif"; 
      images[2] = "img4.gif"; 
      images[3] = "img5.gif"; 
      images[4] = "img6.gif"; 
      images[5] = "img7.gif"; 
      images[6] = "img8.gif"; 
      images[7] = "img9.gif"; 
      images[8] = "img10.gif"; 

      setInterval(function() { 
       changeImage() 
      }, 5000); 

      x = 0; 

      function changeImage() { 
       document.getElementById('ad').src = images[x]; 

       if (x < 8) { 
        x += 1; 
       } else if (x = 9) { 
        x = 0; 
       } 
      } 
     </script> 

     <img id='ad' src="img.gif"> 
    </body> 
</html>

，它仍然能正常工作。當我將相同的代碼放入我的網頁時，它不起作用。還請注意，圖像文件名稱僅僅是示例。我使用的圖像來自photobucket，所以我幾乎不能控制它們的名稱。任何幫助，我可以得到這將不勝感激。

來源

2013-07-03 Trevor Fisher

檢查您的控制檯，它可能引發錯誤 – tymeJV

測試是否相等（X === 9） – sferret

我編輯你的代碼的格式（不改正錯誤）爲更好的可讀性，下次嘗試使用縮進多一點！ ;） –

你需要把你的代碼中window.onload = function() {}

var images = new Array(); 
images[0] = "img2.gif"; 
images[1] = "img3.gif"; 
images[2] = "img4.gif"; 
images[3] = "img5.gif"; 
images[4] = "img6.gif"; 
images[5] = "img7.gif"; 
images[6] = "img8.gif"; 
images[7] = "img9.gif"; 
images[8] = "img10.gif"; 

function changeImage() { 
    document.getElementById('ad').src = images[x]; 
    if (x<8) { 
    x+=1; 
    } 

    else if (x===9) { 
    x=0; 
    } 
} 

window.onload = function() { 
    var x = 0; 
    setInterval(function() { 
    changeImage() 
    },5000); 
}

編輯

此代碼已被我的本地機器和工程上進行測試。

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript"> 
     var images = new Array(); 
     for (var i = 2; i < 11; i++) { 
     images.push("img" + i + ".gif"); 
     } 
     var x = 0; 

     function changeImage() { 
     document.getElementById('ad').src = images[x]; 
     document.getElementById('imgsrc').innerHTML = "<h1>" + images[x] + "</h1>"; 
     if (x < 8) { 
      x += 1; 
     } else { 
      x = 0; 
     } 
     } 
     window.onload = function() { 
     setInterval(function() { 
      changeImage(); 
     }, 1000); 
     } 
    </script> 
    </head> 
    <body> 
    <img id="ad" src="img.gif" /> 
    <div id="imgsrc"><h1>img.gif</h1></div> 
    </body> 
</html>

Here是最終代碼工作的小提琴。由於某種原因JSFiddle不喜歡window.onload，所以我不得不排除它。這並沒有真正表明我的觀點，但我認爲我會把它包括進去。

來源

2013-07-03 20:18:17

我也清理了一下你的代碼。確保你在開始使用它們之前用'var'聲明你的變量。 –

這應該是'else if（x == 9）{' –

@AndyG很好！ –

你的代碼的工作來改變圖像src這個小提琴：http://jsfiddle.net/snB2a/1/

來源

2013-07-03 20:29:57

你不需要'$（document）.ready（）'或'window.onload'來獲得jsfiddle –

並且通過放置小提琴中的內容，我們知道這一定是問題所在。 –

試圖將變量圖像和X重命名爲更長的名稱。可能發生的情況是，如果頁面中有其他代碼，或者更糟糕的話，腳本文件中的某些代碼引用了頁面引用，則使用變量「x」而不在本地聲明它，那麼它實際上會修改「x」變量。

下面是說明問題的例子：

function something() 
{ 
    for (x = 0; i < 10; x++) 
    dosomethingelse(); 
}

如果上面的函數被調用你的頁面，那麼它將覆蓋你的「X」變量。下面的代碼是安全的：

function something() 
{ 
    var x; 
    for (x = 0; i < 10; x++) 
    dosomethingelse(); 
}

來源

2013-07-03 20:37:24 user2544708

一個公平的觀點，但不是這個問題的實際原因。 – meiamsome

JavaScript在一定時間後更改div中的圖像

回答

編輯

相關問題