osone【JQuery】自動切り替え＋サムネイルクリックで画像切り替え
※※※URLが変更となりました。
以前のURLはこちら （http://tam-tam.co.jp/tipsnote/javascript/post3351.html）
ブックマークをされている方はお手数ですが変更をお願いいたします。※※※
サムネイルつきのギャラリーで、キャプションつき、
画像もサムネイルもキャプションも一定の時間で切り替わって、、というギャラリーを作りたいときが多々あります。
まず、やりたいことをまとめます。
- 指定した時間で、自動的に画像やテキストが切り替わる
- サムネイルをクリックしても切り替わる
- 切り替わるエフェクトはクロスフェード
- 開始場所を指定できる（コメント欄参照ください）
JQueryを使用して、この全てを満たすJavascriptを作ってみました。
イメージとしては以下のようなものです。
【HTMLはこちら】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- images--><div class="g-inner clfix"> <div id="view"> <p><img src="images/image1.gif" alt="" width="240" height="150"></p> <p><img src="images/image2.gif" alt="" width="240" height="150"></p> <p><img src="images/image3.gif" alt="" width="240" height="150"></p> </div> <ul id="caption"> <li>テキスト1</li> <li>テキスト2</li> <li>テキスト3</li> </ul> <ul id="thumbBtn"> <li><img src="images/image1.gif" alt="" width="40" height="25"></li> <li><img src="images/image2.gif" alt="" width="40" height="25"></li> <li><img src="images/image3.gif" alt="" width="40" height="25"></li> </ul></div><!--// images--> |
＜div id=”view”＞内はメインイメージ、
＜ul id=”caption”＞内はキャプション、
＜ul id=”thumbBtn”＞内はサムネイルボタンです。
現在は3つずつありますが、数は変更できます。
ただ、メインイメージ、キャプション、サムネイルの数が合うように指定してください。
メインイメージを一つ増やしたらキャプション、サムネイルも一つずつ追加が必要です。
【head内はこちら】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | //JQuery読み込み<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">$(function (){ //定義 var active="active",interval=6000; var index=0, timerId=null; var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li"); tabs.each(function(){$(this).removeClass(active);}); content.hide(); cap.hide(); tabs.eq(0).addClass(active); content.eq(0).fadeIn("fast"); cap.eq(0).fadeIn("fast"); //サムネイルクリック時 tabs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change(tabs.index(this)); setTimer(); return false; }); //タイマーセット setTimer(); function setTimer(){ timerId=setTimeout(timeProcess,interval); return false; } function timeProcess(){ change((index+1)%tabs.length); timerId=setTimeout(arguments.callee,interval); } //サムネイルをクリックした時or指定時間がきた時の画像切り替え function change(t_index){ tabs.eq(index).removeClass(active); tabs.eq(t_index).addClass(active); //fadeout setTimeout(function(){ content.eq(index).stop(true, true).fadeOut(3000), cap.eq(index).stop(true, true).hide() ;}, 300); //fadein setTimeout(function(){ index=t_index; content.eq(index).fadeIn(3000), cap.eq(index).fadeIn(3000) ;}, 400) }});</script> |
（JQueryは↑段々古くなってしまので、うまくいかないときは新しいものを試してみてください）
1 | var active="active",interval=6000; |
というのは
1 2 3 | var active=”選択時に付加するクラス名”,interval=切り替え時間; を、var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li");var tabs=$(“サムネイル”), content=$(“メインイメージ”), cap=$(“キャプション”); |
を指定してください。
【cssはこちら】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | div.g-inner { position:relative; width:240px; height:200px;}#view { position: absolute; width:240px; height:150px; top:0; left:0; overflow:hidden;}#view p { position: absolute; width:240px; height:150px; top:0; left:0;}#thumbBtn { position:absolute; top:160px; right:0px;}#caption { position:absolute; top:165px; left:0px;}#thumbBtn li { padding: 0 0 0 2px; float:left; text-align:right; width: 45px; cursor:pointer;}#thumbBtn li img { border: solid 1px #ccc;}#thumbBtn li.active { opacity:0.5; filter:alpha(opacity=50); -ms-filter: "alpha( opacity=50 )";} |
コンテンツのレイアウト、画像のサイズによってこちらの数値を変えてください。
JSで選択時に付加するクラス名を変更した場合は
thumbBtn li.active
のところも変更します。
現在選択時には半透明になるようになっています。
以上でギャラリーの出来上がりです。
シンプルなので更新がしやすく、JSもカスタマイズ可能です。
＜動作確認済 ブラウザ＞
windows：firefox3～8、IE6～9、chrome
mac：safari3、chrome、firefox3
今回のサンプルのデータはこちらからダウンロードできます 2012.9.14更新
（ライセンスフリー）
