s3Slider.jsを使ってFlashのようなスライドショーにチャレンジ♪

今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。
今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのようにスムーズな動きをするスライドショーです。
とても簡単なので、わりと短時間でキレイなスライドショーが出来ました♪

設置方法。

下準備。

スライドしたい画像を数枚用意します。
スライドした枚数分だけ画像を用意します。サムネイル画像は今回ナシです。

jsファイルのダウンロード。

配布サイト(http://www.serie3.info/s3slider/)より 「s3Slider.js」をダウンロードします。

headerの記述。

HTML ファイルのheaderでjsファイルの関連付けの記述。

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="js/s3Slider.js" type="text/javascript"></script>

スライドショー用のScriptをheaderに記述。

「timeOut: 3000」の部分の数字を小さくすると、画像の切替が早くなります。

<script type="text/javascript">
      $(document).ready(function() {         $('#slider').s3Slider({             timeOut: 3000         });     });
</script>

body部分に最初に表示する画像の設定を記述。

liの画像を上から実行する。表示したい枚数だけliで記述。Divのid名はheaderのScriptの部分と同じ。liについてclass名は取ったら動かなくなります。
画像のタイトル名の前の「span」はテキストの帯の位置を指定します。

<div id="slider">
<ul id="sliderContent">
	<li class="sliderImage"> <a><img src="画像1のパス" /></a>
<span class="top"><strong>画像1のタイトル</strong>
画像1の説明</span></li>
	<li class="sliderImage"> <a><img src="画像2のパス" alt="2" /></a>
<span class="top"><strong>画像2のタイトル</strong>
画像2の説明</span></li>
</ul>
</div>

CSSを記述。(配布サイトのをいじると楽だと思います)

今回は、テキストの位置を上下のみにしましたが、左右にする事も出来ます。

配布サイト(http://www.serie3.info/s3slider/)にデモがありますので、こちらを参考にされると良いと思います。