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

このコードは、4つの画像を表示することを目的としており、10秒ごとに、4つの画像すべてを同時に切り替え、4つの配列内のすべての画像を調べます。画像は、このコードを含むHTMLファイルの上のimages/ディレクトリにあります。テストのために、myimage1op.jpgのみに変更しました。これは機能し、op.jpgを正しく表示します。ただし、ファイル名の代わりに配列をクエリすると、が表示されますundefined。それが一番の問題です。

問題2、forループを次のようなより通常の外観に変更すると、次のようになります。

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

スクリプトは完全に機能しなくなります（op.jpgは表示されず、画像を変更しようともしません）...なんてこった！

テスト目的でFirefoxとGoogleChromeを使用しています。

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 に答える