3

私はほとんど初心者のJavascript'erであり、ボタンを押すと、メインウィンドウからの画像を含む循環的な「ムービー」を表示するウィンドウをポップアップするWebページで試しています。私が試したことから、グーグルでかなり近づいていることがわかりますが、何かが私を逃しています。

私は、次の結果が 2 つの別々の質問につながることを知っています。しかし、両方とも同じ問題/目的に関連しているため、おそらくこれは単一の（長いが）投稿に属していると思います。だから私はそれの大きさが人々をあまり怒らせないことを願っています... ;-)

とにかく、これは私が関連するコードだと思うもののスナップショットです:

<html>
<head>
<script language="javascript">
function wait() {}
function anim() {
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+(main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  /*while(true)*/
  for(i=0; i<main.document.images.length; i++) {
    next=main.document.images[i].src;
    popup.document.images[0].src=next;
    timeout=setTimeout('wait();',500);
  }
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img src="img1.jpg"></p>
....
<p><img src="img16.jpg"></p>
</body>
</html>

関連性のためにこれを入力/適応させました。タイプミスがないことを願っています...

Debian Etch のIceweasel (Firefox 2.x のブランド変更) を使用しています。他のブラウザでは試していません。Iceweasel では、次のことが起こります。

  1. ポップアップは想定どおりに表示されますが、サイクルは最後の画像にまっすぐ進むようです。setTimeout写真間の「一時停止」には効果がないようです。
  2. 最後の画像が表示され、ポップアップのステータス バーの途中にプログレス バーが表示され、何かがロードされていることが示されます。

だから私の質問は：

  1. setTimeoutここでコールをどのように使用すればよいですか? 「空の」関数を呼び出そうとしたので、 を持つサイクルで「一時停止」として機能します。setTimeout()サイクルは、メインウィンドウの画像配列からポップアップ単一画像を更新します。
  2. 外部ファイルから HTML コードをロードしてポップアップをロードすると ( anim.html)、ウィンドウがリロードを待ち続ける「進行状況バー」からステータスバーが表示されるように見えます。window.open()他の場所からのものかどうかはまだ試してみますが、空のウィンドウをロードして writeln を実行するのではなく、 を使用して外部ファイルから HTML ページをロードすることが重要/関連性があるかどうかを知りたいHTMLを「書く」。
  3. そうしないと、ブラウザーwhile(true)が応答を停止し、コンピューターが 100% の CPU になるためです。最後のアイテムの前にカウンターをゼロに戻すサイクルを作成できますがif、forこれを無限サイクルにする別の「エレガント」または「より適切な」方法はありwhile(true)ますか?それとも問題ありませんか?

事前にコメントをいただければ幸いです。可能であれば、同様のソリューションを説明している既存の参考文献へのポインタです。

4

3 に答える 3

3

私はこれがあなたがそれが意味すると思うことを意味するとは思わない:

timeout=setTimeout('wait();',500);

どうやら、あなたはsleep()これをしようとしています。これは JSタイムアウトの仕組みではありません- これonclickはあなたのコードで起こります: 画像配列をループし、すぐに画像を 0 番目から 1 番目に切り替えます...最後に; また、wait()すべてのスイッチで、「今から 500 ミリ秒後に関数を実行します」と言います。

window.setTimeout(foo,bar,baz)barこれを行います:ミリ秒のタイマーを設定して戻ります。コードの実行は次のステートメントから続行されます。ミリ秒後bar、関数foo(baz)が自動的に呼び出されます。の 3 番目以降の引数setTimeoutはオプションで、1 番目の引数の関数に渡されます。

あなたができること：

function anim() { 
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+
      (main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+
    '</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" ' + 
    'onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');

  // *changed below*
  // start the animation with the 0th image
  next_image(0,main.document.images,popup.document.images[0]);
}

function next_image(index,source_image_array,target_image) {
    // if not at end of array
    if (source_image_array.length < index) { 
        next=source_image_array[index].src;
        target_image.src=next;

        // do this again in 500 ms with next image
        window.setTimeout(next_image,500, index+1 ,
                            source_image_array,target_image);
    }
}

このようにして、anim()関数の最後に を呼び出しますnext_image(0)。これにより、画像が配列の 0 番目に設定され、タイマーがnext_image(1)500 ミリ秒で呼び出されるように設定されます。それが発生すると、画像が最初に設定され、タイマーがnext_image(2)さらに 500 ミリ秒を呼び出すように設定され、配列に画像がなくなるまで続きます。

于 2009-03-28T11:44:44.587 に答える
1

ご質問に対する直接的な回答ではありませんが、JavaScript フレームワークjQueryとプラグインを使用することで、簡単に画像のスライドショーを作成できます。JavaScript を一から学びたいと思うのは素晴らしいことだと思いますが、jQuery とプラグインのルートに進むと、非常に多くの時間を節約できます。DIY をしたい場合でも、jQuery を使用することをお勧めします。jQuery を使用すると、DOM 操作が非常に簡単になるからです。

于 2009-03-28T12:20:55.263 に答える
0

Piskvor へ: 返信ありがとうございます。これはまさに私が知りたかったことです:

setTimeout(foo,bar,baz)barこれを行います:ミリ秒のタイマーを設定して戻ります。コードの実行は次のステートメントから続行されます。ミリ秒後bar、関数foo(baz)が自動的に呼び出されます。の 3 番目以降の引数setTimeoutはオプションで、1 番目の引数の関数に渡されます。

したがって、ここでは修正された例に従います。他の Google 社員の参考になれば幸いです ;-)

<html>
<head>
<script language="javascript">
function display(img,i, popup) {
  var next; var after_ms=750; var max=img.length;
  if(i>=max) i=0;  /* so we can cycle infinitely */
  next=img[i].src; popup.document.images[0].src=next;
  setTimeout(display,(i+1<max?after_ms:4*after_ms), img,i+1,popup);
}
function anim() {
  var popuptitle='Movie';
  var popup_properties="width="+document.images[0].width+
      ",height="+(document.images[0].height+40)+
      ",toolbar=no,location=no,directories=no,status=no"+
      ",menubar=no,scrollbars=no,copyhistory=no,resizable=no"
  var popup=parent.open("", popuptitle, popup_properties);
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  display(document.images,0, popup);
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img name="1"  src="img1.jpg"></p>
// .... 
<p><img name="16" src="img16.jpg"></p>
</body>
</html>

私も学んだこと：

  1. これwhile(true)は悪いことです。ブラウザがハングアップします。代わりにanim()、最後に到達したときにインデックスをゼロに戻す条件を関数で使用しました。
于 2009-03-28T13:35:03.743 に答える