スライドショーで画像切り替え

画像をスライドショーとして表示

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

メイン画像のfullxx.jpgを連番(01~)で用意。

jQuery

$(function () { // プリロード for(var i = 1; i <= 5; i++) { $('<img>').attr('src', '/img/full0' + i + '.jpg'); } // スライドショー(3秒で切り替え) var timer = setInterval(slideshow, 3000); function slideshow() { // 次番号を抽出 var next_numbering = Number($('#full img').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 = $('#full img').attr('src').replace(/[0-9]{2}/, next_numbering); $('img').fadeOut('fast', function() { $(this).attr('src', img_full).fadeIn(); }); } $('#full img').hover( function () { // スライドショーを中止 clearInterval(timer); }, function () { // スライドショーを再開 timer = setInterval(slideshow, 3000); } ); });

HTML

<div id="full"> <!-- 最初の画像を記述 --> <img src="/img/full01.jpg"> </div>

サンプル

記述された画像順に切り替える

jQuery

$(function () { // スライドショー(3秒で切り替え) var timer = setInterval(slideshow, 3000); function slideshow() { $('img:first').fadeOut('fast', function() { $(this).next('img').fadeIn(); // 最後尾に移動 $('#full').append(this); }); } $('#full img').hover( function () { // スライドショーを中止 clearInterval(timer); }, function () { // スライドショーを再開 timer = setInterval(slideshow, 3000); } ); });

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をよく書いています。