サムネイルクリックで画像切り替え

サムネイルをクリックするとメインの画像が切り替わる

サムネイル画像のthumbxx.jpgとメイン画像のfullxx.jpgを連番(01~)で用意。

jQuery

$(function () { // プリロード for(var i = 1; i <= 5; i++) { $('<img>').attr('src', '/img/full0' + i + '.jpg').appendTo('body').hide(); } $('#thumb img').click(function() { // thumbをfulに置換 var img_full = $(this).attr('src').replace('thumb', 'full'); // 画像をフェードイン、フェードアウトする $('#full img').fadeOut('fast', function() { $(this).attr('src', img_full).fadeIn(); }); // 画像をフェードイン、フェードアウトしない // $('#full img').attr('src', img_full); }); });

HTML

<div id="full"> <img src="/img/full01.jpg"> </div> <ul id="thumb"> <li><img src="/img/thumb01.jpg"></li> <li><img src="/img/thumb02.jpg"></li> <li><img src="/img/thumb03.jpg"></li> <li><img src="/img/thumb04.jpg"></li> <li><img src="/img/thumb05.jpg"></li> </ul>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。