サムネイルクリックで画像切り替え
サムネイルをクリックするとメインの画像が切り替わる
サムネイル画像の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>
サンプル
