画像のスライダー（縦移動）
画像を上移動のスライダーとして表示
jQuery
$(function () {
// 1番目の画像を末尾に複製
$('#gallery').append($('li').eq(0).clone().get());
// スライダー（3秒で切り替え）
var timer = setInterval(slideshow, 3000);
function slideshow() {
if (parseInt($('#gallery').css('top')) == -1200) {
// 最初に戻る
$('#gallery').css('top', '0px');
}
// 上に移動
$('#gallery').animate({
top: '-=240px'
}, 300);
}
$('img').hover(
function() {
// スライダーを中止
clearInterval(timer);
}, function() {
// スライダーを再開
timer = setInterval(slideshow, 3000);
}
);
});
CSS
#frame {
position: relative;
overflow: hidden;
width: 320px;
height: 240px;
}
#gallery {
position: absolute;
}
#gallery li {
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>
サンプル
