javascriptのカルーセル

2010/12/06 19:45

このQ&Aのポイント

javascriptを使用して配列に入れたイラストとタイトルを順次両方向に表示するカルーセルを作成したい
画像をボタンで前後に移動する機能は実装できたが、画像に対応する表題を表示する方法がわからない
テーブルを利用して画像と表題を配列から呼び出すことは可能かどうか悩んでいる

javascriptのカルーセル

配列に入れたイラストとそのタイトルを「次へ」「戻る」ボタンで順次両方向に表示したいのです。画像をボタンで前後に移動するところまではできたのですが、画像に対応する表題をどうやって表示したらいいのかどなたか教えていただけないでしょうか。やはりテーブルを利用しないとだめでしょうか。そうすると今度は画像をどうやって配列からテーブルに呼び出していいかわかりません。表題ですので画像と表題を配列に入れて同じカウンタで呼び出せればと思っています。以下現在のコードです。よろしくお願いします。 <html> <head> <title>バックナンバー</title> </head> <body> <center> <table width="550"><tr><td><td> <script type="text/javascript"> <!-- //画像を格納する配列の作成 var IMG = new Array(); IMG[0]=new Image(); IMG[0].src="chatsune/chatsune18.JPG"; IMG[1]=new Image(); IMG[1].src="chatsune/chatsune19.JPG"; IMG[2]=new Image(); IMG[2].src="chatsune/chatsune20.JPG"; IMG[3]=new Image(); IMG[3].src="chatsune/chatsune21.JPG"; IMG[4]=new Image(); IMG[4].src="chatsune/chatsune22.JPG"; IMG[5]=new Image(); IMG[5].src="chatsune/chatsune23.JPG"; IMG[6]=new Image(); IMG[6].src="chatsune/chatsune24.JPG"; IMG[7]=new Image(); IMG[7].src="chatsune/chatsune25.JPG"; var cnt=0; function Forward() { if(document.getElementById) { if(cnt >= IMG.length-1) { cnt = IMG.length-1; } else{ cnt++; document.getElementById("sd").src = IMG[cnt].src; //一つ画像を表示したらカウント用変数cntの値を＋１にする } } } function Back() { if(document.getElementById) { if(cnt <= 0) { cnt = 0; } else { cnt--; document.getElementById("sd").src = IMG[cnt].src; } } } </script> <img src="chatsune/chatsune18.JPG" id="sd" width="500" height="480" alt=""> <br> </td></td></tr> <tr><td align="left"> <form name="slide"> <input type="button" value="戻る" onclick="Back()"></td> <td align="right"> <input type="button" value="次へ" onclick="Forward()"></td></tr> <tr><td></td><td align="right"> <a href="list.html">バックナンバーのリストへ戻る</a></td></tr> </table> </form> </body> </center> </html>

minazz
お礼率60% (14/23)

JavaScript
回答数2
ありがとう数2

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

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/12/07 11:49 回答No.2

画像の変わりにテキストを、同様に入れ替えてあげればよろしいかと。同じ雰囲気でいくのなら、例えばそのまま画像の下に表題を表示するとして、HTMLの画像タグの改行の後に　<span id="caption">caption0</span> などのような表題を表示する部分を設けておいて、画像と同様に表題を配列で　caption[0] = "Caption0"; 　caption[1] = "Caption1"; 　　・・・・・定義しておいて、画像を入れ替えるのと同時に　document.getElementById("sd").src = IMG[cnt].src; 　document.getElementById("caption").innerHTML = caption[cnt]; のように、テキストを入れ替えてあげれば可能です。（他にも方法はいろいろあると思いますが…）ついでながら… 　<table width="550"><tr><td><td> 　　<img src= > 　</td></td></tr> っておかしくありませんか？（使うならcolspan=2とかでは？） Back()とForward()はほとんど同じ処理なので、 function move(n) { var elm, idx; 　if (!(elm = document.getElementById("sd"))) return; 　idx = cnt + n; 　if (idx<0 || idx>=IMG.length) return; 　cnt = idx; 　elm.src = IMG[idx].src; 　document.getElementById("caption").innerHTML = caption[idx]; } みたいにまとめておいて、move(1)、move(-1)のようにして使うという考えもありかも。

質問者

お礼 2010/12/07 14:26

うおー、できました！！まったく初心者なものでいろいろとつっこみどころはあると存知ますがとりあえず動いたので非常に嬉しいです。innerHTMLというメソッドを見て「これなのかなー」と思っていましたが使い方がよくわからないでいました。ほんとうにありがとうございました！！

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

yyr446
ベストアンサー率65% (870/1330)

2010/12/07 10:39 回答No.1

<image>要素には、そもそもaltという属性があって、その画像のタイトルを入れても、この場合イラストのタイトルだから許されると思います。だから、　IMG[0]=new Image(); 　IMG[0].src="chatsune/chatsune18.JPG"; と同じように　IMG[0].alt="hogehoge18"; とセットしとけます。表題の表示は、単に<span>要素のテキストノードの書き換えでもいいでしょう。　document.getElementById("title").innerHTML = IMG[cnt].alt; とか、　 var title,span; 　 title = document.getElementById("title"); 　 span = document.createElement("span"); 　 span.appendChild(document.createTextNode(IMG[cnt].alt)); 　　 while(title.hasChildNodes()) 　 title.removeChild(title.firstChild); 　 document.getElementById("title").appendChild(span); とかで、 <div id="title"></div>をお好きな場所に配置して、CSSで調整すればよいんじゃないかと...

質問者