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>
jQueryプラグイン「pikachoose」で小気味良いスライドショーを作るサンプル
記事作成：2008年12月22日
前の記事：jQueryで画像に反射効果を！「Reflection.js for jQuery」
次の記事：2008年アクセスランキング
関連記事
人気記事
最新記事RSS
- JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
- でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
- mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
- これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
- MVPenでアナログの良さを考え直す。
- 第3回「マネタイズHACKS」に参加してみた。
- div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
- jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
- 入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
- iPhoneライクにスクロールさせるJavaScript「OverScroll」