前回で、表示はできるようになったので、
各プロパティを詳しく解析していきたいと思います。
ライブラリ配布サイトはこちら。
[Slideshow]
http://www.electricprism.com/aeron/slideshow/
◆表示サイズを指定するプロパティ
[height:xxx]
高さを指定
[width:xxx]
幅を指定
ピクセル数（単位不要）のみの指定となります。
数値はそのまま記述しても""で囲んでも”で囲んでもOKでした。
%での指定も試みましたが、構文エラーとなりできないようです。
◆エフェクトを設定するプロパティ
[type:xxx]
スライドショーのタイプを指定。
「fade」「pan」「zoom」「combo」「push」「wipe」の6タイプから選択します。
デフォルト（何も指定しない場合）は「fade」です。
それぞれがどのような動きをするのか検証してみます。
今回サンプルに利用するのはこの写真。季節感まぜこぜです。
◇type:’fade’
デフォルト。前の写真が消えていきながら次の写真が現れます。
◇type:’pan’
写真のフォーカス位置（中心点）が動いていきます。
◇type:’zoom’
写真がズームアップされた状態から始まり、遠ざかるように表示されます。
◇type:’combo’
pan+zoomです。フォーカス地点が動きつつ、zoomが変化します。
※panとzoomとcomboでは写真が切り替わるときにはfade効果がはたらきます。
◇type:’push’
右から左に写真が押し出されます。
◇type:’wipe’
紙芝居形式です。前の写真の上に次の写真がスライドされます。
pushは写真の切り替え時に前の写真も動きますが、wipeは固定されたままです。
◆オプション
[pan:xxx]
[zoom:xxx]
zoomやpanの度合いを決定するオプション。
type:’zoom’ならzoom、type:’pan’ならpan、type:’combo’なら両方指定することができます。
0から100までの数値（単位は%になる）か”rand”というキーワードを指定します。
“rand”を指定すると、スライドごとにランダムな度合いでzoom、focusします。
サンプルでは type:’combo’ 、zoom:10 、pan:100 を指定。
◆その他効果
[ duration:[xxxx,xxxx] ]
ページの切り替え時間を指定できます。
duration：[ 動作時間 , 停止時間 ]（単位はミリ秒）の形式で指定します。
サンプルでは type:’push’ 、duration:[500,5000] としています。
ということで、いろいろなプロパティを使用したのがこちら。
ちなみに、引数の順序は特に決まりがないようです。
<div id='sample' class='slideshow'>
<img src='../images/a.jpg' height='120' width='180'/ >
</div>
<script type="text/javascript">
myShow = new Slideshow('sample', {hu: '../images/' , type:'combo' , zoom:'rand' , pan:'rand' , duration:[1000,2000] , images: ['a.jpg','b.jpg','c.jpg']});
</script>
◆はまりました・・・
サンプル用スライドショーをCSSのdisplay属性による表示・非表示で切り替えようとしたら
「引数が無効です」というJavaScriptエラーが・・・。
スライドショー表示をしたい<div>タグのすぐ下にscriptを書く場合、
<div>にstyle=’display:none’が設定されていると、
該当するidのオブジェクトがない（みえない）ため
エラーとなってしまうということが判明しました。
style=’display:none’による切り替えを行いたい場合は、
切り替えるタイミングで（onClickイベントとか）、
スライドショー表示のロジックを実行させる必要があるのですね。
というわけで今回のサンプルは、スライドショー表示のロジックが
リンクのonClick時に発生するようにしております。
次回はスライドショーのサムネイル表示に挑戦です。