skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

スライドショーを作成するjavascript「Slideshow」

｜ ｜ ｜ ｜ ｜ ｜ ｜

スライドショーを作成するjavascriptのうち画像間のエフェクトを変更できるのはあまり多くありません。
Slideshowはエフェクト（種類・時間）、ナビゲーションの方法などを変更することができます。

使用方法
Slideshowからslideshow.jsをmootoolsからmootools.jsをダウンロードします。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/slideshow.js" type="text/javascript"></script>
以上に加え、スライドショーの設定を行います。
<div class="slideshow" id="slideshow">
<img src="トップ画像" height="" width="">
</div>
<script type="text/javascript">
myShow = new Slideshow('slideshow', {
type: 'combo', //fade, pan, zoom, combo, push,wipe（デフォ：fade）
navigation: 'thumbnails', //arrows, arrows+ ,thumbnails
duration: [2000, 4000], //エフェクト時間
width: 400, height: 300, //スライドショーの大きさ（デフォ：トップ画像での指定）
captions: ['Caption','Caption','Caption' ], //'Caption'でキャプション内容を括る
images: ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'], //使用する画像
hu: 'http://www.skuare.net/test/img/mooSlideShow/' //画像の存在するディレクトリ
});
</script>
スライドショーを作成するjavascript「Slideshow」サンプル

記事作成：2007年10月04日

前の記事：ソースを華麗に整えるjavascript「SyntaxHighlighter」
次の記事：角を回るDockを実現するjavascript「Corner Dock Navigation」