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>

js使用一些示例图像http://jsfiddle.net/ApfJz/8/

Javascript 4-image幻灯片w / arrays＆amp;的setTimeout

1 个答案: