2箇所に設定したスライドショー、1箇所しか動かない

このQ&Aのポイント
  • JavaScript超初心者の質問です。2箇所に設定したスライドショーがうまく動かず、1箇所しか動きません。
  • 問題のソースコードを掲載しており、アドバイスをいただきたいと思っています。
  • それぞれのスライドショーの設定や画像の表示順序、タイミングに問題がある可能性があるため、詳細なソースコードの解析が必要です。
回答を見る
  • ベストアンサー

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"> <!-- var i=1; var j=1; picture=new Array(); for(i=1; i<=4; i++){ picture[i] = new Image(); }; picture[1].src = "akaemi.jpg"; picture[2].src = "noristop2.jpg"; picture[3].src = "ume.jpg"; picture[4].src = "mizuba.jpg"; function slideshow(){ img1.src= picture[j].src; j++; if(j>=5){ j=1 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> <TD WIDTH="" HEIGHT=""> <IMG SRC="tyou1.jpg" ID="img2" WIDTH="" HEIGHT=""></TD> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=5; var j=5; photo=new Array(); for(i=5; i<=8; i++){ photo[i] = new Image(); }; photo[5].src = "tyou1.jpg"; photo[6].src = "tyou2.jpg"; photo[7].src = "tyou3.jpg"; photo[8].src = "tyou4.jpg"; function slideshow(){ img2.src= photo[j].src; j++; if(j>=9){ j=5 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> </TR> </TBODY> </TABLE> </BODY>

  • nagu2
  • お礼率93% (40/43)

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

  • ベストアンサー
  • talepanda
  • ベストアンサー率58% (45/77)
回答No.1

slideshow関数が2個あります。 両方、setTimeOutで(多分)2個目の関数が登録されるのでしょう。 名前を変えてみては?

nagu2
質問者

お礼

早々のご回答ありがとうございました。 talepandaさんのアドバイス 【slideshow関数が2個あります。】がヒントになりました。(*slideshowが関数だとも知らない私・・) 考えて作りなおしたら、動きました。 アドバイスありがとうございます。大感謝です! あつかましいですが・・ JavaScriptの勉強方法も教えていただけると、うれしです。 <HTML> <HEAD> <TITLE> </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=1; var j=1; picture=new Array(); for(i=1; i<=4; i++){ picture[i] = new Image(); }; picture[1].src = "akaemi.jpg"; picture[2].src = "noristop2.jpg"; picture[3].src = "ume.jpg"; picture[4].src = "mizuba.jpg"; photo=new Array(); for(i=1; i<=4; i++){ photo[i] = new Image(); }; photo[1].src = "tyou1.jpg"; photo[2].src = "tyou2.jpg"; photo[3].src = "tyou3.jpg"; photo[4].src = "tyou4.jpg"; function slideshow(){ img1.src= picture[j].src; img2.src= photo[j].src; j++; if(j>=5){ j=1 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> </HEAD> <BODY onLoad="slideshow()"> <TABLE WIDTH="770" BORDER="1" CELLSPACING="0" CELLPADDING="0"> <TBODY> <TR> <TD WIDTH="" HEIGHT=""> <IMG SRC="akaemi.jpg" ID="img1" WIDTH="" HEIGHT="" ></TD> <TD WIDTH="" HEIGHT=""> <IMG SRC="tyou1.jpg" ID="img2" WIDTH="" HEIGHT="" ></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

関連するQ&A

  • 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か所目の指定がどこか足りない又は違うのではないかと思うのですが、 色々試してみても上手くいきません。 ご教授をお願いいたします。

  • 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> どなたか回答よろしくお願いいたします。

  • jqureryスライドショーが上手くいきません。

    こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }

  • スライドショー

    初めまして、ちゃりおと申します。 JavaScript初心者です。 あるページに静止画(.jpg)が3枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。 ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか? 諸先輩方、お知恵をおかしください。 //スクリプトここから <html> <head> <title>slideshow</title> <script language="javascript"> <!-- function autoslide_aisa(){ document.n_aisa.src = "img/aisa_anime.gif"; } function autoslide_ann(){ document.n_ann.src = "img/ann_anime.gif"; } function autoslide_mipori(){ document.n_mipori.src = "img/mipori_anime.gif"; } // --> </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> //スクリプトここまで

  • html内かscript内で画像出力。どちらが軽い

    ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg~5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか? <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>

  • JavaScript - 月ごとに画像変化

    <script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> ("["と"]"は画像の端)という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。

  • スライドショーについて

    ど~もど~も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな? 私も同じような設計で悩んでてピッタシと思うのがやっとあった!と思ってたら・・・jQueryじゃないみたい(泣) 私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。 ソースを貼っておくのでよろしくお願いします。 htmlファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.frontstyle.com/shopcruise/tokyo_009.html --><HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible><!--css--> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css"> <!--js--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript> jQuery.noConflict(); </SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript> jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0 });}); </SCRIPT> <!--[if lt IE 7]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> <!--//js--></HEAD><BODY><DIV id=slide class=galleryview> <!--スライドショーここからだよ--> <DIV id=gallery_box> <!--メイン画像ここからだよ--> <DIV class=panel><IMG alt="○○○ src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV> <!--メイン画像ここまでだよ--> <!--メイン画像ここまでだよ--><!--サムネイルここからだよ--> <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL><!--サムネイルここまでだよ--> </DIV><!--スライドショーここまでだよ--> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。 困っているので、お願いします。

  • IEでimages[...]のエラーになる原因は?

    下記プログラムをIETesterで開くと、 このページのスクリプトでエラーが発生しました。 文字: 3 エラー: 'document.images[...]'はNullまたはオブジェクトではありません コード: 0 というエラーメッセーが出てしまいます。 Firefoxだと正常に動いたのですが、 document.images[i].srcというのは、IEで対応していないということでしょうか? それか、そもそもこういった書き方は間違いでしょうか? <script language="JavaScript"> <!-- rrr = new Image(200,100); rrr.src = "sample.jpg"; function sss(){ document.fff.nnn.value=""; ppp.innerHTML = "" for(var i=1; i<=30; i++){ document.images[i].src = rrr.src; : : : : : //--> </script> </head> <body onload="sss()"> <form name="fff"> <img src="title.jpg"> <div id="nnn"></div> <table> <tr> <td><img src="a.jpg" width="200" height="100" onclick="yyy(1)"></td> <td><img src="a.jpg" width="200" height="100" onclick="yyy(2)"></td> <td><img src="a.jpg" width="200" height="100" onclick="yyy(3)"></td>

  • 画像のロールオーバー

    画像のロールオーバーで下記のスクリプトを教えてもらいました。 画像aをマウスオーバーで画像a2に変わる クリックでオーバーした状態を保持(画像a2のまま) さらに、画像bをマウスオーバーで画像b2に変わり クリックでオーバーした状態を保持(画像b2のまま) そのクリック時、画像a2が画像aに変わる 実装できたのですが。 下記のソース2つテーブルが1つのhtml上にあり a~fまでg~iまで画像が分かれていて a~fをクリックし画像が変わった後 g~iをクリックするとa~fの画像が変わらないようにしたいのです。 二つのテーブルの画像を別々に考えたいのですが、できますでしょうか? よろしくお願いします。 <html> <head> <style type="text/css"> <!-- img.group {width: 111px; height:50px;} --> </style> <script type="text/javascript"><!-- var img=['a.jpg,a2.jpg','b.jpg,b2.jpg','c.jpg,c2.jpg','d.jpg,d2.jpg','e.jpg,e2.jpg','f.jpg,f2.jpg','g.jpg,g2.jpg','h.jpg,h2.jpg','i.jpg,i2.jpg']; var elm=[]; var o_idx=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++) if (e[i].className=='group1') elm[j++]=e[i]; for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } } function change(idx,n){ return function(){ if (n > 1){ if (o_idx > -1) elm[o_idx].src=img[o_idx].split(',')[0]; elm[idx].src=img[idx].split(',')[1]; o_idx=idx; } else { if (idx != o_idx) elm[idx].src=img[idx].split(',')[n]; } };} // --></script> </head> <body> <table width="676" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="a.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="b.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="c.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="d.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="e.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="f.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> <br> <table width="333" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="g.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="h.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="i.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> </body> </html>

  • 画像のサムネール+フォトアルバムを制作中で困っています

    こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。 よろしくお願いいたします。 サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" >           ・           ・           ・           ・      40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、  B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。       "mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。 上記のような方法をとりたいです。 どうか、よろしくお願いいたします。

専門家に質問してみよう