JQuery Cycle Pluginで簡単スライドショー

こんにちは。
このブログはホップススタッフがそれぞれの視点で自由な内容で記事を書くことになっています。
さて、今回私の番ではJQuery Cycle Pluginを紹介したいと思います。

最近 jquery にはまっています。何かをやろうとした時に簡単に良い感じのものを作れるからです。
既にいろいろな所で紹介はされているのでシンプルに分かりやすくを心掛けて紹介してみたいと思います。

■参考：jquery cycle plugin
http://malsup.com/jquery/cycle/

■サンプル

■サンプルの実コード
サンプルの実ファイルはこちら

●手順１．

<script type=“text/javascript” src=“js/jquery-1.2.6.js”></script>
<script type=“text/javascript” src=“js/chili-1.7.pack.js”></script>
<script type=“text/javascript” src=“js/jquery.cycle.all.js?v2.11″></script>
まずjquery本体やそれに必要なライブラリを読み込みます。ライブラリ自体には手は加えません。

●手順２．

<script type="text/javascript">
$(function() {
   $('#s1').cycle({
      fx:     'fade',
      timeout: 2000
   });
});
</script>

今回の設定内容を記述します。
fx: の fade　の部分を変えることでアニメーションの種類を変えられます。
timeout　はフェードする時間です。短くすることで１瞬で切り替わるようになります。

●手順３．

        <div id="s1" class="pics">
            <a href="A"><img src="images/beach1.jpg" width="200" height="200" /></a>
            <a href="B"><img src="images/beach2.jpg" width="200" height="200" /></a>
            <a href="C"><img src="images/beach3.jpg" width="200" height="200" /></a>
        </div>
実際にスライドさせるものを記述します。
id="s1"　になっているのがポイントです。
手順２．で設定した IDに対して効果を与えています。

その他、cssを設定することでデザインも自由に適用できます。
ちなみにこれを利用して、後日まがりや.net用のブログパーツを作成予定です。