1

そのため、Google Chrome の新しい Web サイトで、setInterval 関数を使用して 5 秒ごとに画像を切り替えようとしています。これは機能しているようですが、プロパティ src を null に設定できないという問題があります。

var images = new Array();
images[0] = "/images/grilled-chicken-large.png";
images[1] = "/images/sizzly-steak.png";
var img = document.getElementById("img");

function changeImage() {
     for (var i = 0; i < 3; i++) {
        img.src = images[i];
        if (i == 2){i = i - 2;};
     }
}

window.onload=setInterval("changeImage()", 5000);

問題は、ページの読み込みが完了する前に img の ID を持つ要素を取得しようとしていることですが、既に window.onload を取得しているため、どうすればよいかわかりません。また、setInterval と img 変数を含む init() 関数を作成すると、ページがフリーズします。

何か案は？

4

4 に答える 4

3

2問題は、 2 つの要素 (0 と 1) しかない配列の要素にアクセスすることです。

ただし、スクリプトには論理エラーもあります。現在表示されている画像のインデックスはどこに保存しますか? そのインデックスを保持するグローバル変数が必要です。

var currentIndex = 0;
function changeImage() {
    // Switch currentIndex in a loop
    currentIndex++;
    if (currentIndex >= images.length)
        currentIndex = 0;

    var img = document.getElementById("img");
    img.src = images[currentIndex];
}

document.onload = function() {
    setInterval(changeImage, 5000);
}

imgドキュメントが読み込まれてから 5 秒後に変数が割り当てられるように、変数を関数に移動しました。

簡単に説明すると、JavaScript はイベントベースのプログラミング言語です。つまり、間隔が発生するたびにスライドショー変更コードが実行され、いくつかの作業 (次のスライドへの切り替え) が行われ、その後、ブラウザーがページをレンダリングできるようになります。ループ内のスライドを反復すると、スクリプトがスライド間でまだ実行されているため、ブラウザが新しいスライドを表示する方法がありません。解決策は私が投稿したものです。ループ変数を置き換えるグローバル変数を定義し、次のスライドが表示されるたびにそれを増やします。

于 2012-07-30T21:34:57.513 に答える
1

ここ：

window.onload = function () {

    var images = [
        'http://placekitten.com/100/200',
        'http://placekitten.com/200/100',
    ];

    var img = document.getElementById( 'img' );

    setInterval(function () {
        img.src = img.src === images[0] ? images[1] : images[0];
    }, 1000 );

};

ライブデモ: http://jsfiddle.net/wkqpr/

2 つ以上の画像がある場合は、次の操作を実行できます。

window.onload = function () {

    var images = [
        'http://placekitten.com/100/200',
        'http://placekitten.com/200/100',
        'http://placekitten.com/200/150',
        'http://placekitten.com/150/300'
    ];

    images.current = 0;

    var img = document.getElementById( 'img' );

    setInterval(function () {
        img.src = images[ images.current++ ];
        if ( images.current === images.length ) images.current = 0;       
    }, 1000 );

};

ライブデモ: http://jsfiddle.net/wkqpr/1/

于 2012-07-30T21:38:32.187 に答える
0 
function changeImage() 
{
    for (var i = 0; i < 2; i++) 
    {
        img.src = images[i];
     }
}


window.onload=function()
{
    setInterval(changeImage,5000);
}

for ループの最後の行はまったく役に立たず、物事を複雑にするだけです。また、ウィンドウのオンロード イベントを設定する方法は標準ではありません。

編集:src明らかに、配列のサイズが 2 しかないため、プロパティは null です!!

于 2012-07-30T21:53:30.727 に答える
0

あなたの for ループは奇妙に見えます。そのループを試してください：

function changeImage(){
  if(!img.attributes["index"]){img.attributes["index"]=0;return;};
  img.attributes["index"]++;
  img.src=images[img.attributes["index"]];
}
window.onload=function(){
  window.img=document.getElementById("img");
  setInterval("changeImage()",5000)
}

動作するはずです。
グローバル変数ではなく、画像の属性に画像インデックスを格納していることに気付くでしょう。グローバルの方が少し速いと思いますが、画像に保存すると、必要に応じてこれを複数の画像に簡単に拡張できます。また、ブラウザがフリーズする問題は、次のコードでした。

for(var i=0;i<3;i++){
  //Some more stuff
  if(i==2){i-=2};
}

iに到達するたびに が true2になるため、このループは無限i==2です。これは、反復がリセットさiれ0、最初からやり直すことを意味します。それを防ぐ唯一の方法はbreak;、私がどこにも見ないどこかです。ヒント: 通常、for ループでインデックス変数を改ざんすることはお勧めできません。

于 2012-07-30T21:36:58.513 に答える