• ベストアンサー

一つのページで二つ動かすのはできないですか

画像を次々に変えていくJavaScriptを一つのページで2個使いたいのですが、二つ使うと、表示されません。これでは無理なのでしょうか？ 無理だったら、他に何かいい方法があれば教えてください。 これを使いました。よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- num = 18; nme = "img" exp = "gif" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',500)"> <BR><BR> <IMG src="img1.gif" name="img" border="0"> </BODY> </HTML>

質問者が選んだベストアンサー

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.1

function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; document.img0.src = nme + cnt + "." + exp; } ・・・・ ・・・・ <IMG src="img1.gif" name="img" border="0"> <IMG src="img1.gif" name="img0" border="0"> とすれば2つの(同じ)画像を同時にかえられるようです 2つの画像を別にするなら num = 18; nme = "img" nme0 = "img0" exp = "gif" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; document.img0.src = nme0 + cnt + "." + exp; } って感じにすればいいです あとはまぁ必要なところをちょこちょこっと書き換えてください（＾＾）

jacky521
質問者

お礼

ありがとうございます。大変、助かりました！ もっと勉強しないとだめだなあと思いました・・・ 本当にありがとうございました。

その他の回答 (1)

  • hkd9001
  • ベストアンサー率48% (99/204)
回答No.2

jacky521 さん、こんばんは。 さてJavaScriptを２つ使いたい、というご質問ですね。 もし、私の解釈が間違っていたならばご容赦願いたいのですが… 「function changeImage()」と同じようなfunctionが　もうひとつあって、できれば　それぞれを異なる周期で動かしたい」 ということではないか？と考えます。もし　そうであれば… 　たとえば２つのfunction Ａ，Ｂがあり、Ａは500ms、Ｂは300msの周期で動かしたいとします。まず、BODY タグにある setIntervalの時間の値を100ms にします。そして、Ａには「５回呼ばれるごとに作動」、Ｂには「３回呼ばれるごとに作動」となるように（if文や変数などを追加して）ロジックを組みこんでやれば、異なる周期で動くようになるのではないかな？と思います。 　なお上記の setInterval の時間の値を 100ms にした理由は、ＡＢ両functionの周期の最大公約数だからです。 …ご健闘を祈ります。では、おやすみなさい！

jacky521
質問者

お礼

とても丁寧な説明、ありがとうございました！ 大変、勉強になりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 画像を入れ替えたい

    こんにちは。初心者であまりよく分からないので教えていただきたいのですが・・・下記のプログラムで画像を入れ替えるというのをやりたいのですが、ずっと入れ替え続けるのではなくて、１枚目から２枚目に入れ替えるだけで終わらせたいのです。for文を使えばいいとのかなと思うのですが、どこにforを入れたら良いのか分かりません。あるいはもっと簡単なやり方があるのでしょうか・・・。急いでやらないといけないので教えていただけたらと思います。どうぞよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> </BODY> </HTML>

  • 画像をフィルターを使って入れ替えたいです

    再度恐れ入ります。画像を入れ替えるときに、フィルターを使いたいのです。トップページの画像１枚をもう一枚と入れ替えて、最初の一枚に戻って終わりたいのですが・・・。今のままだと２枚の画像の入れ替えが延々と繰り返すことになるので、それを１回で止めたいのです。本当に初心者な質問で申し訳ございませんが、教えていただけると助かります。どうぞよろしくお願いいたします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; img.filters.revealTrans.Apply(); img.src = nme + cnt + "." + exp; img.filters.revealTrans.Play(); } //--> </SCRIPT> </HEAD> <!-- 画像を入れ替える間隔(ミリ秒単位) --> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',5000)"> <IMG src="img/img0.jpg" name="img" border="0" style="filter:revealTrans(duration=2,transition=8)"><BR> </BODY> </HTML>

  • １つのファイルで画像をクリックしたら差し代わる方法

    表題のようにJavascriptで１つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか？ Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m　m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //１つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/index"; exp = "jpg"; cnt = 0; function changeImage() { cnt++; cnt %= num; document.index.src = nme + cnt + "." + exp; } </script> //２つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/img"; exp = "jpg"; cnt = 0; function changeImg() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } </script> htmlは下記の通りです。 <!--１つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--２つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>

  • フィルターを使って画像を入れ替えたいのですが、うまくいきません

    今スクリプトやタグについて勉強中です。 フィルターを使って画像を入れ替えたいと思い、下のものを使ってやってみたのですが、ビルダー上ではうまく表示されているのですが、アップすると1枚目のみ表示されず、2枚目からの表示になってしまいます。 初心者なりに色々試してはみたのですが、どうしたらいいのか、分かりません。 全くと言っていいほどの初心者なのでお助けいただければと思います。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 20; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分("img/img"部分に表示させたい画像のファイル名などを入れています。） exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; img.filters.revealTrans.Apply(); img.src = nme + cnt + "." + exp; img.filters.revealTrans.Play(); } //--> </SCRIPT> </HEAD> <!-- 画像を入れ替える間隔(ミリ秒単位) --> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',5000)"> 画像が一定間隔で入れ替わります。<BR> 入れ替えるときの効果の種類は<A href="sample/s0801_2.html">こちら</A>を参考にして下さい。<BR><BR> <IMG src="img/img0.jpg" name="img" border="0" style="filter:revealTrans(duration=2,transition=8)"><BR>（"img/img0.jpgの部分に１枚目の画像のファイル名を入れたところ ビルダー上では表示され、うまく入れ替えが出来ているのですが、アップすると入れ替えが出来ず、1枚目のみ表示されてしまいます） </BODY> </HTML> よろしく御願いします。

  • JavaScriptのことで教えて！

    １シートにJavaScriptを２つ使うことは出来ないのでしょうか？ 画像が点滅するJavaScript と画像が入れ替わるJavaScript 両方を１シートで使用できませんか？ この部分は入力できるのですが <SCRIPT language="JavaScript"> <!-- num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "../img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> 勿論、点滅のJavaScriptも記載済みです。 ところが、 <BODY onload="blink()"> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> このように並列して書くとエラーになります。 ２つのavaScriptは使用できないのでしょうか？ 精通されている方、居られましたら宜しくご指導願います。

  • 再度、JavaScriptのことで教えて！

    先程、JavaScriptのことで質問した者です。 下記にように記述したのですが、プレビューでは正常に表示されるのですが、アップ すると、画像が×印で表示されません。関数、若しくは、ソースの記述に問題があるのでしょうか？ どなたか、検査願えませんか？ --外部ファイル--（ファイル名：men.js） <!-- num = 2; nme = "img/img" exp = "jpg" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> --ソース--- <script type="text/javascript" src="js/men.js"></script>

  • 画像を変えるスクリプト

    <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？ 普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような 感じです。

  • スクリプトの画像入替えでエラーになった！

    web画面で画像を数秒間単位で入れ替えるスクリプトを作動していたのですが、画像を２枚から３枚にしたら上手く表示されなくなりました。 全く理由が解りません。 （当初２枚の画像の時） <!-- num = 2; nme = "img/img" exp = "jpg" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> <body> <A href="b****.shtml"><IMG src="img/img0.jpg","img1.jpg" name="img" border="1"></A> これで上手く作動していました。 ------------------------------------ （画像を３枚にした時） <!-- num = 3; nme = "img/img" exp = "jpg" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> <body> <A href="*****.shtml"><IMG src="img/img0.jpg","img1.jpg","img2.jpg" name="img" border="1"></A> この場合、プレビューとかIEでは正常に3枚の画像が入れ替わるのですが、実際のWEB画面では、３枚目が×で表示されます。 FTPツールからサーバーへの転送も何度か行いましたが状態は変わりません。 私が理解できないのは、プレビューとかIEで表示されてWEB画面で表示されないのは、サーバーが「img2.jpg」を認識していないということではないでしょうか？ その場合でも、FTPツールからサーバーへの転送をすれば良いのではないでしょうか？ それでも駄目なので、精通されている方にお聞きしたくて相談しました。 宜しくお願いします。

  • JavaScriptのwindowcloseとボタンのロールオーバーの組み合わせ方

    いまHPを作成中です。 そのなかでクリックすると、指定された大きさで表示される別ウィンドウがあります。 そのウインドウに次の2つのJavaScriptを使いたいのです。 ひとつひとつなら出来るのですが、二つを組み合わせるとどう書いていいのかわかりません。 しかも、ふたつともhead内に書き込むにはどうしたらいいですか？ １、ウインドウに「閉じる」ボタンを付けたい ２、そのボタンはロールオーバー効果を使ってマウスがオーバーのときはボタンが変化するよう、別のgifを表示したい 1,2の詳しい内容です。 1<a href="javascript:window.close();"></a> 2<head> <title>ロールオーバーイメージ</title> <script language="JavaScript"> <!-- function changeImage1(){ document.myimg.src="img2.gif"; } function changeImage2(){ document.myimg.src="img1.gif"; } // --> </script> </head> <body> <p> <a href="javascript:;" onMouseOver="changeImage1()" onMouseOut="changeImage2()"><IMG src="img1.gif" name="myimg" border=0></a> </p> </body>

  • 画像をクリックして別の画像を変えたい

    ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（button.gif)自身が2.pngなどの画像に変わってしまいます。 　 <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img　src="button.gif">で受け取ってしまっているというのはわかりました。（確認のため <IMG SRC="1.png"> を<A HREF>～</A>より上に持ってきたら思っていた動きになりました。） 　けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する