jQueryプラグイン「pikachoose」で小気味良い動きのスライドショーを作る

スライド風に画像を見せるJavaScriptは多く広まっています。
今回紹介するpikachooseは、jQueryベースで気持ちの良い動きでギャラリーを表示してくれます。

使用方法

pikachooseからpikachoose.js、sliderjs.jsをjQueryからjquery.jsをダウロードします。


<link rel="stylesheet" href="pikachoose.css">

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

<script type="text/javascript" src="sliderjs.js"></script>

<script type="text/javascript" src="pikachoose.js"></script>

		<script language="javascript">

			$(document).ready(

				function (){

					$("#pikame").PikaChoose();

					$("#pikame").SliderJS({

						window_width: 320,

						window_height: 55,

						list_width: 832,

						pikachoose: true

					});

				});

		</script>

上記を記述したら画像を以下のように記述すれば完成です。


<ul id="pikame">

<li><img src="画像パス" title="キャプション "/></li>

<li><img src="画像パス" title="キャプション "/></li>

<li><img src="画像パス" title="キャプション "/></li>

</ul>

サンプル

Javascriptサンプルページ一覧

skuare.net