最近あまり触ってなかったんですが、久しぶりにJqueryを自分で設置しました。参考書なども買ってるのに放置状態だったので、コレを気にもう少しイジイジできればなぁと考えています。

スライダーってTOPページの定番なんで、まずはそこから(・∀・)

そもそも「Jquery」とは？

マークアップやコーディングを始めた最初の頃も訳も分からず、使っていましたが、Wikipediaによると・・・

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。

wikipediaより引用

開発者のジョン・レシグさんってMozilaの人なんですね(・∀・)
要は複雑なJavascriptを簡易的な記述で、素敵な効果や動きをつけれるって事でおけっすか？

Jqueryを設置して、オーソドックスなフェードイン・フェードアウトのスライダー

(1)まずは、本家Jqueryを読み込みます。

自分のサーバーかローカルにダウンロードして、読み込んでもいいのですが
GoogleにホストされているライブラリからJqueryを＜head＞内に読み込んだほうが手っ取り早いです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

(2)次に、JQuery Cycle Pluginをダウンロードして読み込む

イメージスライダーを動かせる要のJQuery Cycle Pluginをダウンロードします。
※外国のサイトはダミーリンクっぽいのが多いんですが一番左上にダウンロードリンクがあります。
そんで、同様にhead内に読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

スライダー設定

スライダーを適用したい場所の＜head＞内に以下の記述を追加します。
「#slide」は任意

<script type="text/javascript">
$(function() {
     $('#slide').cycle();
});
</script>

HTMLを記述

先ほど設定したidを＜div＞で囲って＜img＞を読み込みます。

<div id="slide">
<img src="img/img01.jpg">
<img src="img/img02.jpg">
<img src="img/img03.jpg">
<img src="img/img04.jpg">
</div>

DEMO

初期設定から細かい数値設定

その他、optionを設定します。
「fx」はスライドの種類
「speed」は画像の切り替わりの早さ
「timeout」は画像が切り替わるまでの時間
単位は「1000＝1秒」

<script type="text/javascript">
$(function() {
     $('#slide').cycle({
      fx      : 'scrollLeft',
      speed   : 300, 
      timeout : 3000 
});
});
</script>

その他、色んなアニメーションのスライダーは以下にサンプル↓↓

DEMO

Pager（ページャー）を設定

数字をクッリクすればその画像を表示してくれるページャー機能を追加します。
「#page」の部分は任意

【Javascriptの記述】

<script type="text/javascript">
$(function() {
     $('#slide').cycle({
      fx      : 'scrollLeft',
      speed   : 300,
      timeout : 3000
      pager   :'#page'
        });
});
</script>

HTMｌには先ほど設定したidを空＜div＞を指定します。
【HTML】

<div id="slide">
<img src="img/img01.jpg">
<img src="img/img02.jpg">
<img src="img/img03.jpg">
<img src="img/img04.jpg">
</div>
<div id="page"></div>       

Pager（ページャー）をCSSでデコレート

これでは味気ないので、CSSでコーディングします。

#slide{
     width: 600px;
     height: 250px;
     margin-bottom: 10px;    
}
#page{
     width:600px;
     text-align: center;
     margin-top: 5px;
}
#page a{
     padding:5px 10px;
     background:#5f5f5f;
     text-decoration: none;
     color: #fff;
     margin:0 3px;
     border-radius: 5px;
}

#page a:hover{
     background:#f91d5b;
}

DEMO

optionの記述

今回設定したオプション値のまとめです

fx

スライドのエフェクトを設定※初期値はfade

speed

画像が切り替わる速度を設定※初期値は1000

timeout

画像が切り替わるまでの時間※初期値は4000

pager

ページャー機能を出力※初期値は数字

その他設定値は以下のサイト様が日本語訳で公開してくれていますm(__)m
jQuery Cycle Pluginの使い方 | Webサイト制作支援

まとめ

JQuery Cycle Pluginはプラグインを実装することによって簡単にスライダーが設定できますし、エフェクト効果も豊富です。定番プラグインなので備忘録としてまとめさせていただきました。簡単な記述で、素敵な効果をあっさりかけれるのがJqueryの最大の魅力かと思いますので、自分のデザインパターンの引き出しどんどん増やしていきたいところですね(・∀・)