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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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