skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

要素を切り替える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>


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

記事作成：2010年01月27日

前の記事：気楽に要素を回転させられるJavaScript「jQuery Roundabout」
次の記事：フォームの入力補助を行うJavaScript「AutoSuggest jQuery Plugin」