画像のスライダー

画像をスライダーとして表示

スライドショーで画像切り替え(フェードイン/フェードアウト版)のスライダー版。

jQuery

$(function () { // 1番目の画像を末尾に複製 $('#gallery').append($('li').eq(0).clone().get()); // スライダー(3秒で切り替え) var timer = setInterval(slideshow, 3000); function slideshow() { if (parseInt($('#gallery').css('left')) == -1600) { $('#gallery').css('left', '0px'); } // 左に移動 $('#gallery').animate({ left : '-=320px' }, 300); } $('img').hover( function() { // スライダーを中止 clearInterval(timer); }, function() { // スライダーを再開 timer = setInterval(slideshow, 3000); } ); });

CSS

#frame { position: relative; overflow: hidden; float: left; width: 320px; height: 240px; } /* 320 × (5 + 1) = 1920 */ #gallery { position: absolute; width: 1920px; } #gallery li { display: table-cell; 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をよく書いています。