スライドショーで画像切り替え
画像をスライドショーとして表示
連番の画像順に切り替える
メイン画像の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>
サンプル
