- ベストアンサー
画像による自動スライドショーを作成する方法
- 画像によるスライドショーを作成する方法を紹介します。時間や日にちによって画像が自動変更されるようにすることができます。
- Javascriptファイルの記述でdocument.getElementById("slideshow").innerHTMLを使用して表示させる方法を試みましたが、期待通りに動作しませんでした。
- 上記のコードは画像が表示されない問題があります。解決方法を教えていただけると助かります。
- masa_tokai
- お礼率88% (31/35)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
たびたびどうも、コピペミスがいくつかありました。 それから、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>
その他の回答 (3)
- yyr446
- ベストアンサー率65% (870/1330)
ついでです。下の構造はあってますよね。 <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で試しました。違うところは画像のみだと思うんですが 調べるところは、 画像サイズは揃ってますか？ それぞれの画像は単独で表示できますか？ 等など
お礼
できました。 すいません。 違うPCで見たところバッチリでした。 ありがとうございます。 今現在使っているPCでも再起動をしたところバッチリ見れました。 何から何までありがとうございます。 私ももっともっと学習します。
- yyr446
- ベストアンサー率65% (870/1330)
えーえ！うそでしょう って私の早とちりですが、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」の使い方をよく見てないので、とりあえず やってみてだめだったら、また返事して下さい。
お礼
ソースまで付けていただいてありがとうございます。 compressed.jsはjQueryじゃなくて 「TinySlideshow」なんですね。 すいません。知識不足でした。 添付していただいたソースを使ってみたのですが、画面が真っ白になり何も表示されませんでした。 上記のソースはheadの中に記述したのですが、よろしかったでしょうか？ それともcompressed.jsファイルを呼び出した後に記述したほうがいいですか？ どちらも試してみましたが結果は上記と同じで、画面に何も表示されませんでした。
- yyr446
- ベストアンサー率65% (870/1330)
window.onload =function(){...} というのは、複数できません。一箇所にまとめましょう。 compressed.jsってjQueryですよね。ちがいましたっけ jQueryならwindow.onload =function(){...}は止めて、 $(document).ready()の短縮形を使って $(function(){ // Document is ready }); の中にまとめましょう。 まとめた上で外部JSファイルにすればよろしいかと。
お礼
早々のお返事ありがとうございます。 仰ったとおりcompressed.jsはjQueryです。 上記を参考にさせていただきます。 素人なので間違っていたらすいません。 $(document).ready()｛ //この中に上記のjavascriptの記述を書くということでよろしいのでしょうか？ ｝
お礼
無事動きました。 ありがとうございます。 すごい！！ こんな短時間で・・・。 感謝いたします。 唯一つだけ気になることがあります。 上の大きい画像には指定した画像が表示されるのですが、下の小さいほうの画像には 「取替えステップ その1」 の画像のみ表示され、他の４枚の画像が表示されません。 画像が指定されたところに存在しないということではないようです。 お手数ですが、何かわかりますでしょうか？