画像クリックで次の画像切り替え
画像をクリックすると次の画像が切り替わる
連番の画像順に切り替える
メイン画像のfullxx.jpgを連番（01～）で用意。
jQuery
$(function () {
// プリロード
for(var i = 1; i <= 5; i++) {
$('<img>').attr('src', '/img/full0' + i + '.jpg').appendTo('body').hide();
}
$('#full img').click(function() {
// 次番号を抽出
var next_numbering = Number($(this).attr('src').match(/[0-9]{2}/)) + 1;
next_numbering = ('0' + next_numbering).slice(-2);
// サンプルでは画像は5枚なので5まで進んだら1に戻る
if (next_numbering > 5) {
next_numbering = '01';
}
// 番号を次番号に置換
var img_full = $(this).attr('src').replace(/[0-9]{2}/, next_numbering);
$(this).fadeOut('fast', function() {
$(this).attr('src', img_full).fadeIn();
});
});
});
HTML
<div id="full">
<!-- 最初の画像を記述 -->
<img src="/img/full01.jpg">
</div>
サンプル
記述された画像順に切り替える
jQuery
$(function () {
$('#full img').click(function() {
$(this).fadeOut('fast', function() {
$(this).next('img').fadeIn();
// 最後尾に移動
$('#full').append(this);
});
});
});
CSS
#full img {
display: none;
}
#full img:first-child {
display: inline;
}
HTML
<div id="full">
<!-- 画像を全て記述 -->
<img src="/img/full01.jpg">
<img src="/img/full02.jpg">
<img src="/img/full03.jpg">
<img src="/img/full04.jpg">
<img src="/img/full05.jpg">
</div>
サンプル
