Javascript：メインウィンドウの画像からムービーをポップアップ

私はほとんど初心者のJavascript'erです。私は、ボタンを押すと循環的な "ムービー"を表示するWebページ上で試しています。メインウィンドウからの画像を使用します。私が試したことから周りを回って私は私がかなり近づいていると感じることができますが、何かが私を逃しています。Javascript：メインウィンドウの画像からムービーをポップアップ

次の結果は2つの別々の質問に分かれています。しかし、私は両方が同じ問題/目的に関連しているので、おそらくこれは単一の（長いですが）投稿に属していると思います。だから私はそれのサイズがあまりにも多くの人々をenfuriateしません願っています... ;-)

をとにかく、ここで私は、関連するコードと思われるもののスナップショットだ：私は入力された

<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 rebrand）;私は他のブラウザでこれを試していません。 Iceweaselでは、何が起こるかは次のとおりです。

ポップアップが表示されているように見えますが、最後の画像にサイクルがまっすぐになるようです。 setTimeoutは、画像間の「一時停止」に影響しないようです。
最後の画像が表示され、ポップアップのステータスバーに進行中のバーが途中で表示され、何かがロードされていることが示唆されます。

だから私の質問は以下のとおりです。

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

私はあなたのコメントを事前に、可能であれば同様の解決策を記述している既存の参考文献へのポインタを付け加えます。

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

どうやら、あなたはこれでsleep()しようとしている：私はこれを考えていない

出典

2009-03-28 jbatista

は、あなたがそれが意味考えるものを意味します。これはJS timeoutsがどのように機能するかではありません。これはコード内でonclickが発生します：イメージ配列をループし、すぐに0から1に画像を切り替えます。最後まで; また、すべてのスイッチでを実行すると、「今から500ms後にwait()関数を実行する」と言います。

window.setTimeout(foo,bar,baz)これを実行します：barミリ秒のタイマーを設定して返します。コードの実行は次のステートメントで継続されます。 barミリ秒後に、機能foo(baz)が自動的に呼び出されます。 setTimeoutの3番目以降の引数はオプションで、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番目に画像を設定し、500ミリ秒でnext_image(1)を呼び出すためのタイマーをセットします;その場合、画像は1番目に設定され、タイマーはnext_image(2)を別の500msで呼び出すように設定され、以下同様に配列内に画像がなくなるまでタイマーが設定されます。

出典

2009-03-28 11:44:44 Piskvor

これはあなたの質問に対する直接の回答ではありませんが、JavaScriptフレームワークjQueryとpluginを使用すると、簡単に画像スライドショーを作成できます。私は、あなたが根本からJavaScriptを学びたいと思うのはすばらしいことだと思いますが、jQuery +プラグインのルートを使うと、何時間も節約できます。あなたがDIYをしたいのであれば、jQueryを使うことをお勧めします。なぜなら、DOMの操作が非常に簡単になるからです。 Piskvorへ

出典

2009-03-28 12:20:55 BeefTurkey

：これは私が知るために必要な正確に何で、ご返信いただきありがとうございます：

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

したがって、ここでは修正された例が続きます。

while(true)が、それはブラウザがハングする、悪である：私はそれは私も学んだことを他のGoogler ;-)

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

に役立ちます願っています。代わりに、私は最後に達したときにインデックスをゼロに戻すように設定するanim()関数の条件を使用しました。

出典

2009-03-28 13:35:03 jbatista

Javascript：メインウィンドウの画像からムービーをポップアップ

答えて

関連する問題