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

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

使用方法

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>

サンプル

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 ›

Javascriptサンプルページ一覧

skuare.net