带有数组和 setTimeout 的 Javascript 4 图像幻灯片

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/