画像クリックで次の画像切り替え

画像をクリックすると次の画像が切り替わる

連番の画像順に切り替える

メイン画像の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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について