ベストアンサー

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

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

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

関連するQ&A

← →クリックで前後できるスライドショー
現在、下記のJavaでスライドショーを使っているのですが、写真が前後出来ません。スクリプトに改良を加えることによって、← →で前後移動できるようにする方法はありますか?また、写真ごとに、左下にキャプションを付けられるようになるとより良いのですが。初心者で四苦八苦してる状態です。よろしくお願いします。ちなみに、スライドショーはこんな感じです。 http://www.shinmiura.com/main/Shin_Miura___Portrait.html <Div Align="center"><a href="#" onclick="parapara();return false;"> <img src=http://www.shinmiura.com/image/poartrait/1_1.jpg name=name border=0> <script language=javascript>  </script></Div>
- ベストアンサー
- JavaScript
2箇所に設定したスライドショー、1箇所しか動かない
こんにちは、JavaScript超初心者です。スライドショーを2箇所に設定したのですが、 1箇所しか動きません。ソースを見ていただき、アドバイスを頂けると助かります。よろしくお願い致します。 <BODY onLoad="slideshow()"> <TABLE WIDTH="" BORDER="" CELLSPACING="" CELLPADDING=""> <TBODY> <TR> <TD WIDTH="" HEIGHT=""> <IMG SRC="akaemi.jpg" ID="img1" WIDTH="" HEIGHT=""> </TD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <TD WIDTH="" HEIGHT=""> <IMG SRC="tyou1.jpg" ID="img2" WIDTH="" HEIGHT=""></TD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </TR> </TBODY> </TABLE> </BODY>
- ベストアンサー
- JavaScript
スライドショーなんですが・・・。
スライドショーで　下記のようなHTMLなのですが一回停止をクリックしてから　再開をクリックすると一枚目の写真に戻るようになっています。停止したところから再開するにはどう直せばよいのですか？よろしくお願いします <HTML> <HEAD> <TITLE>スライド</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" onLoad="setTimeout('timer()', 6000)"> <CENTER> <IMG NAME="img" SRC="写真01.JPG" style="filter:blendTrans(duration=1)"> <FORM NAME="Fmess"> <INPUT TYPE="text" NAME="fmess" VALUE="　説明　" SIZE=50> </FORM> <A HREF="JavaScript:crl()">[停止]</A> 　　　<A HREF="JavaScript:restart()">[再開]</A> 　　　<A HREF="JavaScript:window.close()">[終了]</A> </CENTER> <BR> </BODY> </HTML>
- ベストアンサー
- JavaScript
なぜ「ページでエラーが発生しました。」？
字数が限られているので、「なぜエラーなのですか？」 -----ここからhead区間  </SCRIPT> </head> -----ここからbody <BODY onLoad="time(0)"> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT>
- ベストアンサー
- JavaScript
html内にスライドショーを複数設置
こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか？当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。
- 締切済み
- JavaScript
スライドショー
初めまして、ちゃりおと申します。 JavaScript初心者です。あるページに静止画（.jpg）が３枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか？諸先輩方、お知恵をおかしください。 //スクリプトここから <html> <head> <title>slideshow</title> <script language="javascript">  </script> </head> <body BGCOLOR="#FFFFFF"> <table border="0" cellpadding="0" cellspacing="0" width="80%" align="center"> <tr> <td align="center" valign="bottom"> <a href="javascript:autoslide_aisa()"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a> </td> <td align="center"> <a href="javascript:autoslide_ann()"><img src="img/ann1.jpg" name="n_ann" border="0"> </a> </td> <td align="center"> <a href="javascript:autoslide_mipori()"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a> </td> </tr> </table> </body> </html> //スクリプトここまで
- 締切済み
- JavaScript
jqueryのスライドショー。htmlに画像1枚で
jquery-1.5.1.min.jsを使ってjpg画像をランダムにスライドショーさせるプログラムで、下記ポイントを満たしたプログラムへ変えたいです。・scriptが機能しない場合には画像がちゃんと表示される・html上にスライドショーに使う画像を並べない（下記コード参考＝【画像多いバージョン】）・修正するコードは【画像1枚バージョン】よろしくお願いします。【画像1枚バージョン】 <script type="text/javascript"> $(function(){ 　var elm = $(".fadein"); 　elm.children("img").hide(); 　(function(){ 　　var img = elm.children("img:hidden"); 　　elm.children("img:not(hidden)").fadeOut(1000); 　　$(img.get(Math.floor(Math.random() * img.length))).fadeIn(500); 　　var id = setTimeout(arguments.callee, 5000);　　　})(); }); </script> <div class="fadein"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> </div> 【画像多いバージョン】 <script type="text/javascript"> imgLength = 20; firstInt = 1; imgChangeSpeed = 5000; imgExtension = ".jpg"; imgDirectory = "img/"; randomInt = firstInt + 1; $(function(){ var t = setInterval(loadImg, imgChangeSpeed); function loadImg(){ $("#gallery").children("img").animate({'opacity':'0'}, 0) $("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 1000); if(randomInt < imgLength){ randomInt = parseInt(randomInt) + 1; } else{ randomInt = 1; } } }); </script> <div id="gallery"> <img src="img/1.jpg" /> </div>
- ベストアンサー
- JavaScript
スライドショーの画像にリンクがはれない。
http://bxslider.com/examples/thumbnail-pager-1 上記のjsプラグインでＨＰのスライドショーを作っています。一応、うまくできましたが。ソースの１２２行目 <li><img src="/images/730_200/tree_root.jpg" /></li> この画像にリンクをはるために、 <li><a href="●●●●.html"<img src="/images/730_200/tree_root.jpg" /></a></li> と入力してアップロードしなおすと、スライドショーができなくなります。何がいけないのでしょうか。お願いします。
- ベストアンサー
- JavaScript
スライドショーが出来ません。。
web作成は全くの初心者で、今までいろんなサイトの見本のhtmlをコピペしてなんとか少しづつ形にになってきたのですが、どうしてもスライドショーができません、、、こちらのサイト（http://kowaza.boo.jp/）の＜スライドショー＞　　*　フェードインしながら次々と画像を表示　*　というのを参考に作ってみたのですが、全然スライドショーになりません。何がいけないのか全く分からないのですが、どこかおかしなところがありましたら教えて下さい。どうぞよろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>スライドショーの実験</title> <script type="text/JavaScript">  </script> </head> <body onLoad="mygo()"> <span style=" position:absolute ; top:20px ; left:20px ; z-index:1;"> <img src="top.jpg" width="300" name="myp1" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:40px ; left:50px ; z-index:2 ;"> <img src="before.jpg" width="300" name="myp2" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:60px ; left:80px ; z-index:3 ;"> <img src="after.jpg" width="300" name="myp3" border="0" style="filter:alpha(opacity=0);"></span> </body> </html>
- 締切済み
- JavaScript
JavaScriptでスライドショーを2箇所
お世話になります。 http://bunjin.com/java/ こちらの「画像操作→スライドショーのように画像を表示する」を参考にして、フェードインするスライドショーを2か所に表示させたいと考えています。 1か所なら上手くいくのですが、2か所目がエラーになってしまいます。外部jsファイルに次のように記入し、 ------------------------------------------------------ // JavaScript Document var fade_speed = 10000; var fade_duration = 10; var image = new Array(); image[0] = '1.jpg';image[1] = '2.jpg';image[2] = '3.jpg'; var t; var j = 0; var p = image.length; var pre_load = new Array(); for (i = 0; i < p; i++) { pre_load[i] = new Image(); pre_load[i].src = image[i]; } function start_fade() { if (document.all) { document.images.photo2.style.filter="blendTrans(duration=fade_duration)"; document.images.photo2.filters.blendTrans.Apply(); } document.images.photo2.src = pre_load[j].src; if (document.all) { document.images.photo2.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('start_fade()', fade_speed); } photo[0] = '4.jpg';photo[1] = '5.jpg';photo[2] = '6.jpg'; var t2; var j2 = 0; var p2 = photo.length; var pre_load = new Array(); for (i2 = 0; i2 < p2; i2++) { pre_load[i2] = new Image(); pre_load[i2].src = photo[i2]; } function start_fade2() { if (document.all) { document.images.photo3.style.filter="blendTrans(duration=fade_duration)"; document.images.photo3.filters.blendTrans.Apply(); } document.images.photo3.src = pre_load[j2].src; if (document.all) { document.images.photo3.filters.blendTrans.Play(); } j2 = j2 + 1; if (j2 > (p2 - 1)) j2 = 0; t2 = setTimeout('start_fade2()', 8000); } ------------------------------------------------------ htmlには <body id="top" onLoad="start_fade()"> <img src="1.jpg" name='photo2' /> <img src="4.jpg" name='photo3' /> のように記入しています。後半の2か所目の指定がどこか足りない又は違うのではないかと思うのですが、色々試してみても上手くいきません。ご教授をお願いいたします。
- ベストアンサー
- JavaScript

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