画像のスライダー(縦移動)

画像を上移動のスライダーとして表示

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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について