[glider.js]
http://www.missingmethod.com/projects/glider.html
紙芝居のようなスライド表示を行うJavaScriptライブラリです。
今回はオプション引数と、簡単なCSSカスタマイズを行います。
[Gliderオブジェクト]
var my_glider = new Glider('[スライドID]');
[オプション引数]
Gliderオブジェクト生成時に、配列の形式でオプションを指定できます。
オプション指定できるのは、以下の二つの数値です。
【duration】
スライドが切り替わる時間（動いている時間）を指定します。
デフォルトは1.0（秒）です。
【frequency】
スライドが静止している時間を指定します。
デフォルトは3（秒）です。
var my_glider = new Glider('[スライドID]', {duration:[数値],frequency:[数値]});
配列の形であれば、どちらか一方だけを指定してもかまいません。
[duration時間＞frequency時間]と指定すると、
物理的にスライド表示ができなくなるため、
画面がぶれてしまうので注意が必要です。
[CSSカスタマイズ]
各class名とidが明記されているので、それぞれのスタイルをカスタマイズするのは簡単です。
プログラム上指定されているので、以下のクラス名は変更できません。
＊scroller
＊section
＊controls（アンカー指定用クラス）
そのほかに関しては（主にid名）は変更しても問題なくプログラムは動きます。
今回のサンプルでは各スライドに指定するidを独自のものに変更し、
それぞれに背景をつけます。
<div id="スライドID">
<div class="scroller">
<div class="content">
<div class="section" id="【このidを指定】">
<!-- ここにコンテンツを記述 -->
</div>
・・・・・・
</div>
</div>
</div>
各スライドに指定するidを独自に設定できるので、
画像だけでなく、きちんとしたHTMLコンテンツも簡単に組み込めますね。
[サンプル]
オプション引数に[{duration:0.5,frequency:2}]を指定し、
各スライドには以下のCSSを設定しました。
div#1枚目のid{
background:#f3f3f3;
color:#aa7b7b;
}
div#2枚目のid{
background:#feffdc;
color:#aa7b7b;
}
div#3枚目のid{
background:url(../images/back.gif);
color:#fb08b3;
font-weight:bold;
}
※文字色と背景を指定しただけです。。。
（※キャッシュ再生成中の為、SimpleAPIのサムネイルが表示されないようです。）
[class：contentについて]
contentクラスはjsファイル上は特に明示的に使用されていません。
しかし、cssファイル内で、[width: 10000px;]の指定がされています。
この指定により、画像のスライドを表現しています。
（widthの数値が小さいと、上下の移動になります。）
スライド自体は行われますが、contentクラス名を変える場合、
[width: 10000px;]の指定を忘れずにする必要があります。