簡単！便利！　jQuery Cycle Plugin

jQueryには様々なプラグインがありますが、なかでも一番のお気に入りが「jQuery Cycle Plugin」です。
当サイトではTopページとGalleryページで使用しています。

導入するのに簡単なだけでなく、さまざまなエフェクトやプロパティが用意してあって自分の思い通りにカスタマイズできます。

たとえば、TopページのJavaScript設定などは、拍子抜けするほど簡単です。

まずはjQuery本体とjQuery Cycle Pluginのファイルをダウンロードします。
jQueryのバージョンは1.2.3以上をお使いください。最近jQueryは1.3が出ましたが、まだ検証できていないのでここでは1.2.6を使います。
プラグインはjQueryのバージョンによって使えないこともあるのでお気をつけ下さい。

このように読込みます。

<script src="jquery-1.2.3.js" type="text/javascript"></script>
<script src="jquery.cycle.all.pack.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>

パスおよび”common.js”の名前はご自分の環境によって変更してください。読込んだら、”common.js”に以下のように記述します。

$('#slide').cycle({
	fx: 'scrollUp',
	timeout: 7000,
	delay: -2000
});

HTMLは以下のように記述します。

<div id="slide">
<div>１つめ</div>
<div>２つめ</div>
<div>３つめ</div>
</div>

これだけで、Topページのような動きのものができあがります。

本当はこのページを見るより、本家のサイトを眺めたほうが速いんですけどね。
英語だけど、英語のわからない人にもわかると思いますので。。。

サンプルがい〜〜〜〜っぱいありますので、興味のある方はご覧ください。

| 2009年02月13日 18:17 | jQuery | コメント＆トラックバック（0）