クリックで画像スライダー

矢印をクリックすると画像がスライド

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">&lt;</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">&gt;</div>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。