0 
<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 进行测试。

4

1 回答 1

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/

于 2013-03-08T07:25:07.507 回答