的Javascript 4圖像幻燈瓦特/陣列＆的setTimeout

Question

<script type=text/javascript> 

var topLeftImages = ["op.jpg", "qa.jpg", "fl.jpg", "eatgr.jpg", "na.jpg", "ctcc.jpg", "na.jpg", "oacahu.jpg", "hc.jpg", "sup.jpg", "oa.jpg", "rffcc.jpg"]; 
var topRightImages = ["eatgr.jpg", "ulandscaping.jpg", "fp.jpg", "clf.jpg", "lss.jpg", "sup.jpg", "ulandlord.jpg", "lqbc.jpg", "lss.jpg", "lp.jpg", "ulandlord.jpg", "qa.jpg"]; 
var bottomLeftImages = ["poss.jpg", "un.jpg", "pocsik.jpg", "sep.jpg", "rms.jpg", "fp.jpg", "al.jpg", "un.jpg", "sep.jpg", "op.jpg", "al.jpg", "oacahu.jpg"]; 
var bottomRightImages = ["nup.jpg", "clf.jpg", "rffcc.jpg", "sla.jpg", "lqbc.jpg", "pocsik.jpg", "fp.jpg", "np.jpg", "lwtgr.jpg", "lqbc.jpg", "lcsik.jpg", "poss.jpg"]; 

for(var i = 0, l = topLeftImages.length; i < l; i++) 
{ 
    setTimeout(function() 
    { 
     document.getElementById('myimage1').src = "images\\" + "op.jpg"; 
     document.getElementById('myimage2').src = "images\\" + topRightImages[i]; 
     document.getElementById('myimage3').src = "images\\" + bottomLeftImages[i]; 
     document.getElementById('myimage4').src = "images\\" + bottomRightImages[i]; 
    }, 10000); 
} 
</script> 

相關HTML：

<img id="myimage1" src="http://www.hdwallpapers.in/walls/apple_sky_blue_aurora-wide.jpg" width="400" /> 
<img id="myimage2" src="http://www.hdwallpapers.in/walls/apple_sky_blue_aurora-wide.jpg" width="400" /> 
<img id="myimage3" src="http://www.hdwallpapers.in/walls/apple_sky_blue_aurora-wide.jpg" width="400" /> 
<img id="myimage4" src="http://www.hdwallpapers.in/walls/apple_sky_blue_aurora-wide.jpg" width="400" /> 

該代碼是指顯示四個圖像，並且每10秒，同時切換所有四個圖像，通過所有的去我的四個數組中的圖像。這些圖像位於包含此代碼的HTML文件上方的images /目錄中。出於測試目的，我將myimage1更改爲僅限op.jpg。這可以正常顯示op.jpg。但是，查詢數組時，而不是文件名，我得到undefined。 這是第一個問題。

問題二號，當我改變我的for循環到一個比較正常的對望一眼，如：

for(var i = 0; i < l2; i++) 

腳本完全停止（工作不顯示op.jpg甚至不試圖改變圖像）......到底什麼！

我使用Firefox和Google Chrome進行測試。

Answer 1

我建議類似的東西來代替：

<script type=text/javascript> 
    $(document).ready(function() { 

     var topLeftImages = ["op.jpg", "qa.jpg", "fl.jpg", "eatgr.jpg", "na.jpg", "ctcc.jpg", "na.jpg", "oacahu.jpg", "hc.jpg", "sup.jpg", "oa.jpg", "rffcc.jpg"]; 
     var topRightImages = ["eatgr.jpg", "ulandscaping.jpg", "fp.jpg", "clf.jpg", "lss.jpg", "sup.jpg", "ulandlord.jpg", "lqbc.jpg", "lss.jpg", "lp.jpg", "ulandlord.jpg", "qa.jpg"]; 
     var bottomLeftImages = ["poss.jpg", "un.jpg", "pocsik.jpg", "sep.jpg", "rms.jpg", "fp.jpg", "al.jpg", "un.jpg", "sep.jpg", "op.jpg", "al.jpg", "oacahu.jpg"]; 
     var bottomRightImages = ["nup.jpg", "clf.jpg", "rffcc.jpg", "sla.jpg", "lqbc.jpg", "pocsik.jpg", "fp.jpg", "np.jpg", "lwtgr.jpg", "lqbc.jpg", "lcsik.jpg", "poss.jpg"]; 

     var i = 0; 
     var max = 12; 

     setInterval(function() 
     { 
      var index = i % max; 
      document.getElementById('myimage1').src = "images\\" + topLeftImages[index]; 
      document.getElementById('myimage2').src = "images\\" + topRightImages[index]; 
      document.getElementById('myimage3').src = "images\\" + bottomLeftImages[index]; 
      document.getElementById('myimage4').src = "images\\" + bottomRightImages[index]; 
      i++; 
     }, 10000); 
    }); 
</script> 

的jsfiddle一些示例圖像http://jsfiddle.net/ApfJz/8/