要素を切り替えるJavaScript「jShowOff: a jQuery Content Rotator」

要素を切り替えるJavaScriptは多くありますが、自分の好みが見つからないかもしれません。
今回紹介するjShowOff: a jQuery Content Rotator Pluginも選択肢のひとつにしていただければと思います。

sponsors

使用方法

jShowOff: a jQuery Content Rotator Pluginからファイル一式をダウンロードします。

<link rel="stylesheet" href="jshowoff.css" type="text/css">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jshowoff.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#id名').jshowoff({ 
		speed:4500, //表示時間
		changeSpeed:1500, //遷移時間
		controls:false //コントローラを表示するか
	});
});
</script>
あとは上記のIDを付与したdiv内に切り替え要素ごとにdivで囲えば完成です。

<div id="features">
	<div>コンテンツ1</div>
	<div>コンテンツ2</div>
	<div>コンテンツ3</div>
</div>

サンプル

Shore
Eddie

HTML Slide

Example of an HTML slide.

Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.

Learn More ›

Flower
Fern

Javascriptサンプルページ一覧
skuare.net