画像による自動スライドショーを作成する方法

前へ 次へ
このQ&Aのポイント
  • 画像によるスライドショーを作成する方法を紹介します。時間や日にちによって画像が自動変更されるようにすることができます。
  • Javascriptファイルの記述でdocument.getElementById("slideshow").innerHTMLを使用して表示させる方法を試みましたが、期待通りに動作しませんでした。
  • 上記のコードは画像が表示されない問題があります。解決方法を教えていただけると助かります。
回答を見る
  • ベストアンサー

画像によるスライドショー

http://smallwebmemo.blog113.fc2.com/blog-entry-333.html 上記のURLを参考に画像によるスライドショーを作成しました。 これを改良して、時間や日にちによって画像が自動変更するようにしたです。 javascriptファイルの記述でdocument.getElementById("slideshow").innerHTMLを使って表示させようとしたのですがうまく行きません。 困っています。 ------------------------------test.js------------------------ window.onload = function() { var dbData = new Array(); dbData.push({"namae":"取替えステップ その1", "photos":"photos/step_01.jpg", "setumei":"通し棒の付いた方をパンツの通し口から挿入します。", "thumbnails":"thumbnails/step_01_thumb.jpg"}); dbData.push({"namae":"取替えステップ その2", "photos":"photos/step_02.jpg", "setumei":"通し棒を1周させます。", "thumbnails":"thumbnails/step_02_thumb.jpg"}); dbData.push({"namae":"取替えステップ その3", "photos":"photos/step_03.jpg", "setumei":"通し棒が1周したら通し棒とホックを外します。", "thumbnails":"thumbnails/step_03_thumb.jpg"}); dbData.push({"namae":"取替えステップ その4", "photos":"photos/step_04.jpg", "setumei":"ゴムの両端のホックを結合します。", "thumbnails":"thumbnails/step_04_thumb.jpg"}); dbData.push({"namae":"取替えステップ その5", "photos":"photos/step_05.jpg", "setumei":"パチン！　と音がしたら結合完了！", "thumbnails":"thumbnails/step_05_thumb.jpg"}); var msg = " "; for (var i = 0; i < dbData.length; i++) { msg += "<li>"; msg += "<h3>" + dbData[i].namae + "</h3>"; msg += "<span>" + dbData[i].photos + "</span>"; msg += "<p>" + dbData[i].setumei + "</p>"; msg += "<img src= '" + dbData[i].thumbnails + "' >"; msg += "</li>"; document.getElementById("slideshow").innerHTML= msg; } } ------------------------------html------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>かんたん取替えステップ</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="test.js"></script> </head> <body> <div id="title_area"></div> <ul id="slideshow"> //ここにjavascriptのソースより表示したい画像を表示 </ul> <div id="wrapper"> <div id="fullsize"> <div id="imgprev" class="imgnav"></div> <div id="imglink"></div> <div id="imgnext" class="imgnav"></div> <div id="image"></div> <div id="information"> <h3></h3> <p></p> </div> </div> <div id="thumbnails"> <div id="slideleft" title="Slide Left"></div> <div id="slidearea"> <div id="slider"></div> </div> <div id="slideright" title="Slide Right"></div> </div> </div> <script type="text/javascript" src="compressed.js"></script> <script type="text/javascript"> $('slideshow').style.display='none'; $('wrapper').style.display='block'; var slideshow=new TINY.slideshow("slideshow"); window.onload=function(){ slideshow.auto=true; slideshow.speed=5; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs="slider"; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } </script> </body> </html> ---------------------------------------------------------------- 上記のソースは、素人なりに考えて作ったのですが、やはり素人（泣）画像が表示されません。。 どなたか助けてください。 参考URLでもありましたら助かります。

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

たびたびどうも、コピペミスがいくつかありました。 それから、var slideshow=new TINY.slideshow("slideshow"); はグローバル変数にしなきゃだめです。 こうすれば、動きます（全部書きます） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>かんたん取替えステップ</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src='compressed.js'></script> <script type="text/javascript" charset="shift_jis"> //<![CDATA[ var slideshow=new TINY.slideshow("slideshow"); window.onload = function () { var dbData = new Array(); dbData.push({"namae":"取替えステップ その1", "photos":"photos/step_01.jpg", "setumei":"通し棒の付いた方をパンツの通し口から挿入します。", "thumbnails":"thumbnails/step_01_thumb.jpg"}); dbData.push({"namae":"取替えステップ その2", "photos":"photos/step_02.jpg", "setumei":"通し棒を1周させます。", "thumbnails":"thumbnails/step_02_thumb.jpg"}); dbData.push({"namae":"取替えステップ その3", "photos":"photos/step_03.jpg", "setumei":"通し棒が1周したら通し棒とホックを外します。", "thumbnails":"thumbnails/step_03_thumb.jpg"}); dbData.push({"namae":"取替えステップ その4", "photos":"photos/step_04.jpg", "setumei":"ゴムの両端のホックを結合します。", "thumbnails":"thumbnails/step_04_thumb.jpg"}); dbData.push({"namae":"取替えステップ その5", "photos":"photos/step_05.jpg", "setumei":"パチン！　と音がしたら結合完了！", "thumbnails":"thumbnails/step_05_thumb.jpg"}); var msg = " "; for (var i = 0; i < dbData.length; i++) { msg += "<li>"; msg += "<h3>" + dbData[i].namae + "</h3>"; msg += "<span>" + dbData[i].photos + "</span>"; msg += "<p>" + dbData[i].setumei + "</p>"; msg += "<img src= '" + dbData[i].thumbnails + "' >"; msg += "</li>"; document.getElementById("slideshow").innerHTML= msg; } $('slideshow').style.display='none'; $('wrapper').style.display='block'; slideshow.auto=true; slideshow.speed=5; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs="slider"; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } //]]> </script> </head> <body> <div id="title_area"></div> <ul id="slideshow"> <!-- //ここにjavascriptのソースより表示したい画像を表示 --> </ul> <div id="wrapper"> <div id="fullsize"> <div id="imgprev" class="imgnav"></div> <div id="imglink"></div> <div id="imgnext" class="imgnav"></div> <div id="image"></div> <div id="information"> <h3></h3> <p></p> </div> </div> <div id="thumbnails"> <div id="slideleft" title="Slide Left"></div> <div id="slidearea"> <div id="slider"></div> </div> <div id="slideright" title="Slide Right"></div> </div> </div> </body> </html>

masa_tokai
質問者

お礼

無事動きました。 ありがとうございます。 すごい！！ こんな短時間で・・・。 感謝いたします。 唯一つだけ気になることがあります。 上の大きい画像には指定した画像が表示されるのですが、下の小さいほうの画像には 「取替えステップ その1」 の画像のみ表示され、他の４枚の画像が表示されません。 画像が指定されたところに存在しないということではないようです。 お手数ですが、何かわかりますでしょうか？

その他の回答 (3)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

ついでです。下の構造はあってますよね。 <ul id="slideshow"> <!-- //ここにjavascriptのソースより表示したい画像を表示 --> </ul> <div id="wrapper"> <div id="fullsize"> <div id="imgprev" class="imgnav" title="Previous Image"></div> <div id="imglink"></div> <div id="imgnext" class="imgnav" title="Next Image"></div> <div id="image"></div> <div id="information"> <h3></h3> <p></p> </div> </div> <div id="thumbnails"> <div id="slideleft" title="Slide Left"></div> <div id="slidearea"> <div id="slider"></div> </div> <div id="slideright" title="Slide Right"></div> </div> </div> それからCSSもいじってませんよね <style type="text/css"> body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial} #slideshow {list-style:none; color:#fff} #slideshow span {display:none} #wrapper {width:506px; margin:50px auto; display:none} #wrapper * {margin:0; padding:0} #fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000} #information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)} #information h3 {padding:4px 8px 3px; font-size:14px} #information p {padding:0 8px 8px} #image {width:500px} #image img {position:absolute; z-index:25; width:auto} .imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150} #imgprev {left:0; background:url(images/left.gif) left center no-repeat} #imgnext {right:0; background:url(images/right.gif) right center no-repeat} #imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)} .linkhover {background:url(images/link.gif) center center no-repeat} #thumbnails {margin-top:15px} #slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222} #slideleft:hover {background-color:#333} #slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat} #slideright:hover {background-color:#333} #slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden} #slider {position:absolute; left:0; height:81px} #slider img {cursor:pointer; border:1px solid #666; padding:2px} </style> 私が動作確認している分には、このソースで 下部分のサブネール画像のナビゲーションも動いてるんですが．．． IE7とFireFox3.5で試しました。違うところは画像のみだと思うんですが 調べるところは、 　画像サイズは揃ってますか？ 　それぞれの画像は単独で表示できますか？ 等など

masa_tokai
質問者

お礼

できました。 すいません。 違うPCで見たところバッチリでした。 ありがとうございます。 今現在使っているPCでも再起動をしたところバッチリ見れました。 何から何までありがとうございます。 私ももっともっと学習します。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

えーえ！うそでしょう って私の早とちりですが、compressed.jsってjQueryじゃなくて 「TinySlideshow」ってやつですね。 だから$(document).ready()なんてありません。申し訳ない。 window.onload =function(){...}の中にまとめていれないとだめです。 とりあえず、下のようにして... window.onload =function(){ var dbData = new Array(); dbData.push({"namae":"取替えステップ その1", "photos":"photos/step_01.jpg", "setumei":"通し棒の付いた方をパンツの通し口から挿入します。", "thumbnails":"thumbnails/step_01_thumb.jpg"}); dbData.push({"namae":"取替えステップ その2", "photos":"photos/step_02.jpg", "setumei":"通し棒を1周させます。", "thumbnails":"thumbnails/step_02_thumb.jpg"}); dbData.push({"namae":"取替えステップ その3", "photos":"photos/step_03.jpg", "setumei":"通し棒が1周したら通し棒とホックを外します。", "thumbnails":"thumbnails/step_03_thumb.jpg"}); dbData.push({"namae":"取替えステップ その4", "photos":"photos/step_04.jpg", "setumei":"ゴムの両端のホックを結合します。", "thumbnails":"thumbnails/step_04_thumb.jpg"}); dbData.push({"namae":"取替えステップ その5", "photos":"photos/step_05.jpg", "setumei":"パチン！　と音がしたら結合完了！", "thumbnails":"thumbnails/step_05_thumb.jpg"}); var msg = " "; for (var i = 0; i < dbData.length; i++) { msg += "<li>"; msg += "<h3>" + dbData[i].namae + "</h3>"; msg += "<span>" + dbData[i].photos + "</span>"; msg += "<p>" + dbData[i].setumei + "</p>"; msg += "<img src= '" + dbData[i].thumbnails + "' >"; msg += "</li>"; document.getElementById("slideshow").innerHTML= msg; $('slideshow').style.display='none'; $('wrapper').style.display='block'; slideshow.auto=true; slideshow.speed=5; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs="slider"; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } 「TinySlideshow」の使い方をよく見てないので、とりあえず やってみてだめだったら、また返事して下さい。

masa_tokai
質問者

お礼

ソースまで付けていただいてありがとうございます。 compressed.jsはjQueryじゃなくて 「TinySlideshow」なんですね。 すいません。知識不足でした。 添付していただいたソースを使ってみたのですが、画面が真っ白になり何も表示されませんでした。 上記のソースはheadの中に記述したのですが、よろしかったでしょうか？ それともcompressed.jsファイルを呼び出した後に記述したほうがいいですか？ どちらも試してみましたが結果は上記と同じで、画面に何も表示されませんでした。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

window.onload =function(){...} というのは、複数できません。一箇所にまとめましょう。 compressed.jsってjQueryですよね。ちがいましたっけ jQueryならwindow.onload =function(){...}は止めて、 $(document).ready()の短縮形を使って $(function(){ // Document is ready }); の中にまとめましょう。 まとめた上で外部JSファイルにすればよろしいかと。

masa_tokai
質問者

お礼

早々のお返事ありがとうございます。 仰ったとおりcompressed.jsはjQueryです。 上記を参考にさせていただきます。 素人なので間違っていたらすいません。 $(document).ready()｛ //この中に上記のjavascriptの記述を書くということでよろしいのでしょうか？ ｝

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

関連するQ&A

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

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

  • javascriptのスライドショーについての質問です。

    javascriptのスライドショーについての質問です。 javascriptの勉強を始めたところです。ある教科書の中にjQueryを使用した スライドショーのコードが掲載されていました。それを下記のように記述しましたが、 ブラウザで確認するとスクリプトのコードがそのまま表示されてしまいます。 基本的な間違いがあるように思うのですが、宜しくご回答いただけたら嬉しいです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>slideshow</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/slideshow"></script> </head> <body> <div id="slideshow"> <img id="image1" src="/livingimg/003.jpg" alt="Image 1" /> <img id="image2" src="/livingimg/004.jpg" alt="Image 2" /> </div> <div id="imagealt"><p></p></div> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> </ul> <script type="text/javascript" </script> $(document) .ready(function(){ var slideImages = $('#slideshow > img' ); slideImage.hide().filter(':first').show(); $('imagealt p').text(slideImages.filter('first').attr('alt')); $('ul.imagelist li a').click(function(){ if (this.className.indexOf('current') == -1) { slideImages.hide(); slideImages.filter(this.hash).fadeIn(500); $('ul.imagelist li a').removeClass('current'); $(this).addClass('current'); $('#imagealt p').text(slideImages.filter(this.hash). attr('alt')); } return false; }); }; </body> </html>

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

    ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？ 私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣） 私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。 ソースを貼っておくのでよろしくお願いします。 ｈｔｍｌファイル <!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> 長くなっちゃってごめんなさい。 困っているので、お願いします。

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

  • 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）が３枚あって、それらをクリックするとアニメ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> //スクリプトここまで

  • 画像スライドショー用のjQueryを埋め込みたい

    画像スライドショー用のjQueryを埋め込みがしたいです。 埋め込みたい物は以下のサイトの物です。 http://www.zurb.com/playground/orbit-jquery-image-slider ここの本文にもあるのですが私の思う通りにまずは記載します。 header部分に <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/orbit.css"> を記載し埋め込みたい場所に <div id="featured"> <img src="overflow.jpg" alt="Overflow: Hidden No More" /> <img src="captions.jpg" alt="HTML Captions" /> <img src="features.jpg" alt="and more features" /> </div> を記載するまではわかるのですが、 <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> はどこに記載するのでしょうか？？ またデレクトリーはどこにいれればいいのでしょうか？？ 基礎的な質問で申し訳ございませんが、教えて頂ける方宜しくお願い致します。

  • リンク付きスライドショーの不具合について

    先日、ホームページを制作しました。そこにスライドショーを「A Simple jQuery Slideshow」といjavascriptを使って作ったあと、ソースの編集をして画像一つ一つにURLを貼り付けました。 しかし、なぜかスライドショーの最初が何も表示されない状態になってしまったのです。少し待つと、スライドショーが始まるのですが・・・ なんか不自然なので、急いで改善したいです。どうかご協力お願いします！ つくったホームページ→http://www.geocities.jp/raisutei/ A Simple jQuery Slideshow→http://jonraasch.com/blog/a-simple-jquery-slideshow ソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <link rel="shortcut icon" href="./favicon.ico"><title>らいす亭</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow a:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $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()", 5000 ); }); </script> <style type="text/css"> /*** set the width and height to match your images **/ #slideshow { position:relative; height:350px; } #slideshow a { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow a.active { z-index:10; opacity:1.0; } #slideshow a.last-active { z-index:9; } </style></head> <body style="background-image: url(http://www.geocities.jp/raisutei/gazou/haikei.jpg);"><!-- geoguide start --><div align=center><script language="JavaScript">var jps=382116062;var jpt=1401374340</script><script language="JavaScript" <table style="text-align: left; margin-left: auto; margin-right: auto; width: 805px; height: 409px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><!-- this will work with any number of images --><!-- set the active class on whichever image you want to show up as the default (otherwise this will be the last image) --> <div style="text-align: center;" id="slideshow"><a href="http://www.geocities.jp/raisutei/consept.html"><img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/karaageintro.png" alt="Slideshow Image 1" class="active" align="middle"></a>&nbsp; <a href="http://www.geocities.jp/raisutei/okomeconsept.html"> <img style="width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/ocomeintro.png" alt="Slideshow Image 2"></a><a href="http://www.geocities.jp/raisutei/gozen.html"> <img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/gozenintro.png" alt="Slideshow Image 3">&nbsp;</a></div> </td> </tr> </tbody> </table> ※一部中略しました。

  • CSS + Javascript でスライドショー

    手動で画像を順番に表示させる、スライドショーのような表現を作ろうとしています。 色々なサイトを参考に見よう見まねで作成してみたのですが、 途中でうまくいかずに行き詰っております(´・ω・`) ［XHTML］ <body onload="seltab(0)"> <!-- 順番に表示させる内容 --> <div id="slide" name="slide"><p>1</p></div> <div id="slide" name="slide"><p>2</p></div> <div id="slide" name="slide"><p>3</p></div> <div id="slide" name="slide"><p>4</p></div> <div id="slide" name="slide"><p>5</p></div> <!-- ページ切り替え操作部分 --> <a href="javascript:seltab(-10000)">first</a> <a href="javascript:seltab(-1)">back</a> <a href="javascript:seltab(1)">next</a> <a href="javascript:seltab(10000)">last</a> ［Javascript］ var selected = 0; function seltab(move) { o = document.getElementsByName("slide"); selected = selected + move; if (selected < 0) {selected = 0} if (selected >= o.length) {selected = o.length - 1} for (i = 0; i < o.length; i++) { if (i == selected) { o[i].style.display = "block"; } else { o[i].style.display = "none"; } } } このやり方で一応動作はしています（WIN IE + WIN Firefox にて確認） が、id が同じページ内で重複している点と、div に name を付ける点で、構文チェックに引っ掛かってしまう為、できればそれを回避したいなと思っています。 同じ動作が作れれば、Javascript の処理方法に特に拘りはありません。 お分かりになる方がいらっしゃれば、ぜひぜひご指導お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する