クリックで画像スライダー
矢印をクリックすると画像がスライド
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('left')) == 0) {
// 最後へ進む
$('#gallery').css('left', '-1600px');
}
// 右に移動
$('#gallery').animate({
left: '+=320px'
}, 300);
});
$('#next').click(function() {
if (parseInt($('#gallery').css('left')) == -1600) {
// 最初に戻る
$('#gallery').css('left', '0px');
}
// 左に移動
$('#gallery').animate({
left: '-=320px'
}, 300);
});
});
CSS
#frame {
position: relative;
overflow: hidden;
float: left;
width: 320px;
height: 240px;
}
#gallery {
position: absolute;
left: -320px;
width: 1600px;
}
#gallery li {
display: inline-block;
width: 320px;
}
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>
サンプル
