[glider.js]
http://www.missingmethod.com/projects/glider.html
紙芝居のようなスライド表示を行うJavaScriptライブラリです。
写真だけでなく、divタグ内に指定したコンテンツなら全て紙芝居表示できます。
◆基本的なスライドの設定
【HTML】
◇移動用リンク
◇紙芝居表示となる部分
これら二つの要素を、紙芝居表示ブロック内に記述することになります。
<div id="スライドID">
<div class="controls">
<a href="#1枚目ブロックのID">１枚目</a> |
<a href="#2枚目ブロックのID">２枚目</a> |
<a href="#3枚目ブロックのID">３枚目</a> |
</div>
<div class="scroller">
<div class="content">
<div class="section" id="1枚目ブロックのID">
<!-- ここにコンテンツを記述 -->
</div>
<div class="section" id="2枚目ブロックのID">
<!-- ここにコンテンツを記述 -->
</div>
<div class="section" id="3枚目ブロックのID">
<!-- ここにコンテンツを記述 -->
</div>
</div>
</div>
</div>
◇移動用リンク
class名は[controls]となります。
◇紙芝居表示となる部分
紙芝居表示部分（外側）のclass名は[scroller]、
紙芝居表示部分（内側）のclass名は[content]、
セクション（一枚ごとのブロック）class名は[section]となっています。
これらはScript上で使用しているので名前の変更はできません。
（名称変更した場合の設定方法までは現在未解析です。）
これらのclass名でglider.cssにデフォルトスタイルが設定されています。
デフォルトのままのCSSだと、デザイン性は少ないので、
CSSの調整が必要となると思います。
構造は単純なので、割と簡単にスタイル調整を行うことができます。
【Script】
スライドIDを引数とした次のScriptを上記HTMLの定義後に記述します。
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('[スライドID]');
</script>
（ヘッダでOnLoad時に宣言してもOKです。）
<script type="text/javascript" charset="utf-8">
window.onload = function() { var my_glider = new Glider('[スライドID]')};
</script>
◆サンプル
Terakoya Work – Glider
（※キャッシュ再生成中の為、SimpleAPIのサムネイルが表示されないようです。）
このスクリプトはCSSやオプション設定がかなり豊富です。
次回は、まず、自動スライドショー指定方法のオプションから
調べていきたいと思います。