ベストアンサー

スライドショー（１回）が思うように動作しません

2002/12/08 00:52

下記のjavascriptをホームページを参考にして記述したのですが、スライドショースタートをクリックするとスライドショーが表示されるのですが、ページを表示したときは、画像が×になっています。どのようにしたら画像が表示されるのですか <html> <head> <title>zyoutou</title> </head> <body background="yoru.gif"> </body> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <IMG src=""2.jpg" name="img2">　　　　　 <A href="javascript:ccc()" >スライドショー　スタート</a> </html>

m-happy-t
お礼率52% (151/290)

JavaScript
回答数4
ありがとう数1

みんなの回答 （4）
専門家の回答

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

ベストアンサー

noname#199778

2002/12/10 01:09 回答No.4

#3の補足を見ました。スライドショーのどちらも、はじめに2番目の画像が表示され、その後に順番通りに画像が変わっていくという動作になっている状態でしょうか。おそらく原因は、「function ccc()」ないし「function ccc2()」の処理が、意図通りに組まれていないことにあると思います。元のスクリプトでは見たところ、始めにphot_bの画像(2枚目の画像)を呼び出して、それから順番通りに画像を入れ替える処理が組まれているようです。始めから1-2-3-4…と順番通りに表示させたいのであれば、始めに2枚目の画像を呼び出す処理を削除するか、その処理を1枚目の画像を呼び出すように書き換えて、そのあとの順に画像を呼び出す処理も順序を一つずつ繰り上げて書き換えれば、たぶん意図通りのものになるのではないかと。修正方法ですが、function ccc()内で一番初めに「function bbb(b1,b2)」を呼び出している行を消すか、修正すれば良いと思います。具体的には、 function ccc() { if (navigator.appVersion > "3") { bbb('img2','phot_b.src')//　　　←この行を削除 setTimeout("bbb('img2','phot_a.src')",1000) もしくは、 function ccc() { if (navigator.appVersion > "3") { bbb('img2','phot_a.src') setTimeout("bbb('img2','phot_b.src')",1000) setTimeout("bbb('img2','phot_c.src')",2000) 省略 setTimeout("bbb('img2','phot_k.src')",10000) setTimeout("bbb('img2','phot_l.src')",11000) }} とすれば、順番通りに表示させることができると思います。 ccc2()の方も同様に、if文の次にくる「bbb('img3','phot_b3.src')」の行を削除するか、 function ccc2(){ if (navigator.appVersion > "3") { bbb('img3','phot_a3.src') setTimeout("bbb('img3','phot_b3.src')",1000) setTimeout("bbb('img3','phot_c3.src')",2000) 中略 setTimeout("bbb('img3','phot_h3.src')",7000) setTimeout("bbb('img3','phot_i3.src')",8000) }} のように全体を一つ繰り上げて書き換えれば、修正できると思います。こちらもテストしていませんので、自信はありません。参考になれば、幸いです。

質問者

お礼 2002/12/10 18:12

何日にもわたり、ご指導いただきましてありがとうございました。これからも、よろしくお願いします。

その他の回答 (3)

noname#199778

2002/12/08 22:56 回答No.3

#2での補足を見ました。はじめにちょっと寄り道ですが、JavaScriptのfunctionなどは、すべて<head>内に移した方が、後々の問題が少なくなると思います。あと、<script>タグ内のコメントアウト部分が、と閉じてありますが、この部分は //--> としないとブラウザによってはエラーを起こします。 HTMLのコメントアウトは、が対になっていますので、閉じる部分でという書き方はあまりお勧めしません(厳密には間違いなのではないでしょうか)。問題の動作の不良の件ですが、同じページ内で「function ccc()」が2回定義されていることが原因だと思います。スライドショー2用の関数の名前を「ccc2()」に直せば、動かない問題は解消できると思います。あと、もう一つ気になるところが。スライドショー2の方のイメージのsrc定義が重複しているようですが、これも変えておいたほうが良いのではないでしょうか。以下に、ソースを書き出します。 <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> 以上を<head>内に記述して、<body>内は <center> <IMG src="1.jpg" name="img2"> <b><font face="ＭＳ明朝" size="3"><a href="javascript:ccc()">スライドショー１スタート</a></font></b> <IMG src="13.jpg" name="img3"> <b><font face="ＭＳ明朝" size="3" color="#ffff00"><a href="javascript:ccc2()">スライドショー２スタート</a></font></b> </center> というようにしてみては、いかがでしょうか。テストしていませんから、正常に動くかわかりませんので、自信はなしとさせていただきますm(_ _)m。参考になれば幸いです。

質問者

補足 2002/12/10 00:02

何度も、すみません。画像が1＞2＞1＞3＞・・・＞12と最初だけ1＞2＞1となります。もう私には、中身すら理解できないので、よろしくお願いします。 <html> <head> <title>zyoutou</title> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </head> <body background="yoru.gif"> <hr width="100%" size="2" color="#c0c0c0"> <br> <br> <center> <IMG src="1.jpg" name="img2"> <br> <br>　　　　 <b><font face="ＭＳ明朝" size="3"> <a href="javascript:ccc()" >スライドショー１スタート</a> </font></b> <br> <br> <br> <br> <br> <IMG src="13.jpg" name="img3"> <br> <br>　　 <b><font face="ＭＳ明朝" size="3"> <a href="javascript:ccc2()" >スライドショー２スタート</a> </font></b> </center> <br> <br> <br> </body> </html>

ryota2
ベストアンサー率43% (61/140)

2002/12/08 08:47 回答No.2

>画像とスタートボタンを中央にして２段に表示する JavaScriptは<script>～</script>の間なので此れはＨＴＭＬの問題です。 <center> <IMG src="2.jpg" name="img2"><br> <A href="javascript:ccc()" >スライドショー　スタート</a> <center> テーブルで装飾したいなら、 <center> <table> <tr><td><IMG src="2.jpg" name="img2"></td></tr> <tr><td><A href="javascript:ccc()" >スライドショー　スタート</a></td></tr> </table> </centre> こうしてスタイルシートなどを使う。もう一つするには <script>間に、 if (navigator.appVersion > "3") { phot_a3 = new Image(); phot_a.src = "1.jpg" phot_b3 = new Image(); phot_b.src = "2.jpg" phot_c3 = new Image(); phot_c.src = "3.jpg" 省略 phot_i3 = new Image(); phot_i.src = "9.jpg" phot_j3 = new Image(); phot_j.src = "10.jpg" phot_k3 = new Image(); phot_k.src = "11.jpg" phot_l3 = new Image(); phot_l.src = "12.jpg" } function bbb2(b1,b2) { if (navigator.appVersion > "3") { document.images[b1].src = eval(b2); } } function ccc2() { if (navigator.appVersion > "3") { bbb('img3','phot_b.src') setTimeout("bbb('img3','phot_a.src')",1000) setTimeout("bbb('img3','phot_b.src')",2000) setTimeout("bbb('img3','phot_c.src')",3000) 省略 setTimeout("bbb('img3','phot_i.src')",9000) setTimeout("bbb('img3','phot_j.src')",10000) setTimeout("bbb('img3','phot_k.src')",11000) setTimeout("bbb('img3','phot_l.src')",12000) } } <body>間に <IMG src="2.jpg" name="img3">　　　　　 <A href="javascript:ccc2()" >スライドショー２　スタート</a> とでもしておいて下さい。気になる事が一つ。  </SCRIPT> コメントの閉じタグは //--> とするべきです。ネスケがエラー起こすかもしれませんよ。

質問者

補足 2002/12/08 20:29

HPを始めたばかりなので、あまり理解できなくてすみません。下記のように修正しましたが、スライドショー１スタートを押すとスライドショー２の画像が動き、スライドショー２スタートは何も機能しません。どこがおかしいのでしょう。＞気になる事が一つ。  </SCRIPT> コメントの閉じタグは //--> とするべきです。ネスケがエラー起こすかもしれませんよ。閉じてるようなきがするんですけども？ <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <center> <IMG src="1.jpg" name="img2"> <br> <br>　　　　 <b><font face="ＭＳ明朝" size="3"> <a href="javascript:ccc()" >スライドショー１スタート</a> </font></b> </center> <br> <br> <br> <br> <br> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <center> <IMG src="13.jpg" name="img3"> <br> <br>　　 <b><font face="ＭＳ明朝" size="3" color="#ffff00"> <a href="javascript:ccc2()" >スライドショー２スタート</a> </font></b> </center>

noname#199778

2002/12/08 01:18 回答No.1

とりあえず確認したいのですが、質問文では <IMG src=""2.jpg" name="img2">　となっていますが、 <IMG src="2.jpg" name="img2">　の誤りではないですか?(srcのダブルクォートが余計に入ってるようです) もしソースがそのままコピペであれば、これが原因のような気がしますが…

質問者

補足 2002/12/08 05:26

出来ました。ありがとうございます。あと、少し教えてほしいのですが、画像とスタートボタンを中央にして２段に表示するにはどうしたらよいのですか。また、１つのページにスライドショーを２つ表示する場合は、２つめはどのように修正するのですかよろしくお願いします。

スライドショー（１回）が思うように動作しません