的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/