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

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

sponsors

使用方法

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>

またサムネイルを表示する場合CSSで指定する必要があります。
<style type="text/css">
div.slideshow {padding:5px;border:1px solid #DCDCDC}
div.slideshow ul {background: #FFF;bottom: -55px;left: 0px; position: absolute; overflow: hidden;padding: 5px 0;z-index: 10001}
div.slideshow ul a {background-position: 50% 50%;cursor: pointer;display: block;height: 25px;margin-right: 5px;opacity: 0.5;width: 30px}
div.slideshow ul a.active,div.slideshow ul a:hover {opacity: 1}
div.slideshow ul li {float: left;list-style: none}
</style>

sponsors

Javascriptサンプルページ一覧
skuare.net

サンプル

Keylin in Zarcero