画像のスライダー
画像をスライダーとして表示
スライドショーで画像切り替え（フェードイン/フェードアウト版）のスライダー版。
jQuery
$(function () {
// 1番目の画像を末尾に複製
$('#gallery').append($('li').eq(0).clone().get());
// スライダー（3秒で切り替え）
var timer = setInterval(slideshow, 3000);
function slideshow() {
if (parseInt($('#gallery').css('left')) == -1600) {
$('#gallery').css('left', '0px');
}
// 左に移動
$('#gallery').animate({
left : '-=320px'
}, 300);
}
$('img').hover(
function() {
// スライダーを中止
clearInterval(timer);
}, function() {
// スライダーを再開
timer = setInterval(slideshow, 3000);
}
);
});
CSS
#frame {
position: relative;
overflow: hidden;
float: left;
width: 320px;
height: 240px;
}
/* 320 × (5 + 1) = 1920 */
#gallery {
position: absolute;
width: 1920px;
}
#gallery li {
display: table-cell;
width: 320px;
}
HTML
<div id="frame">
<ul id="gallery">
<li><img src="/img/full01.jpg"></li>
<li><img src="/img/full02.jpg"></li>
<li><img src="/img/full03.jpg"></li>
<li><img src="/img/full04.jpg"></li>
<li><img src="/img/full05.jpg"></li>
</ul>
</div>
サンプル
