クリックで画像スライダー(縦移動)

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

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">&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をよく書いています。