jQueryを利用したスライド

特定のサイズ内にコンテンツを詰め込みたいケースがあると思います。しかも、可能ならば自動でスライドさせてコンテンツに目を向けてもらいたいという目的で作成してみたjQuery用のScriptを公開しておきます。

導入方法は簡単です。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

画像をスライドさせるScriptは以下の通りです。一定時間ごとに指定したLI要素の順番を入れ替えることで実現しています。アニメーション処理は800ミリ秒、スライドは10秒ごとに行なう例です。

<script type="text/javascript">
function titleShift(id) {
	$(id+'>ul>li').eq(0).slideUp(800,function(){
		$(id+'>ul>li:last').after($(id+'>ul>li:first'));
		$(id+'>ul>li').eq(-1).slideDown(800);
	});
}
$(function() {
	setInterval('titleShift("#pr")',10000);
});
</script>

なお、ScriptのサンプルではID="pr"直下のUL要素をを処理対象にしています。必要に応じて変更してください。ちなみにHTML側の記述サンプルは以下の通りです。リストを使っているので必要にあわせてスタイルシートを作成してください。

<div id="pr">
<ul>
<li>LI要素内は何を入れても大丈夫です。</li>
<li><img src="/img/losttechnology.png" alt="" width="160" height="48"></li>
<li>好きなだけLI要素を用意して利用してください。</li>
<li>もし縦方向を特定のサイズ内に収めたいのであれば、
親要素に<dfn>height:???px</dfn>と<dfn>overflow:hidden</dfn>を指定します。</li>
<li><img src="/img/2011/paint.akari.png" alt="" width="261" height="166"></li>
</ul>
</div>

LI要素内は何を入れても大丈夫です。
好きなだけLI要素を用意して利用してください。
もし縦方向を特定のサイズ内に収めたいのであれば、親要素にheight:???pxとoverflow:hiddenを指定します。

ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9、Operaを用いて表示を確認しました。