クリックで画像スライダー（縦移動）
矢印をクリックすると画像が上下スライド
jQuery
$(function () {
// 1番目の画像を末尾に複製
$('#gallery').append($('li').eq(0).clone().get());
// 5番目の画像を末尾に複製
$('#gallery').prepend($('li').eq(-2).clone().get());
$('#prev').click(function() {
if (parseInt($('#gallery').css('top')) == 0) {
// 最後へ進む
$('#gallery').css('top', '-1200px');
}
// 下に移動
$('#gallery').animate({
top: '+=240px'
}, 300);
});
$('#next').click(function() {
if (parseInt($('#gallery').css('top')) == -1200) {
// 最初に戻る
$('#gallery').css('top', '0px');
}
// 上に移動
$('#gallery').animate({
top: '-=240px'
}, 300);
});
});
CSS
#frame {
position: relative;
overflow: hidden;
width: 320px;
height: 240px;
}
#gallery {
position: absolute;
top: -240px;
}
#gallery li {
width: 320px;
}
#prev,#next {
width: 40px;
font-size: 32px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
#prev {
margin: 0 0 8px 140px;
}
#next {
margin: 8px 0 0 140px;
text-align: right;
}
HTML
<div id="prev"><</div>
<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>
<div id="next">></div>
サンプル
