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

回転式の画像ギャラリーjavascript「MooRevolver」

｜ ｜ ｜ ｜ ｜ ｜ ｜

Eコマースなどで商品を陳列する際、一定時間で商品を変更していくケースがあります。
その場合にMooRevolverを使用すると、全商品を可視にしながらもエフェクトを付けることができます。

使用方法
MooRevolverからMooRevolver.js、MooRevolver.cssをmootoolsからmootools.jsをダウンロードします。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/MooRevolver.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/MooRevolver.css" type="text/css">
<script type="text/javascript">
window.addEvent("load", function(){
var revolver = new MooRevolver("id名", {
"fxTransition": Fx.Transitions.Bounce.easeOut, //mootoolsのエフェクト
"fade": true, //メイン画像以外を透明にする
"arrowLeft":"prev", //戻る用リンクのid
"arrowRight":"next" //進む用リンクのid
});
revolver.getNext.periodical(3000, revolver); //自動で回す（数字は時間）
});
</script>
上記を書き込んであとは画像を並べれば完成です。
<div id="id名" class="revolver">
<!-- divではなくulでも可能です。 -->
<div><img src="画像パス"></div>
<div><img src="画像パス"></div>
<div><img src="画像パス"></div>
<!-- 上記でulにした場合liにすることができます。 -->
</div>
<a href="#" id="prev">previous</a> | <a href="#" id="next">next</a>
回転式の画像ギャラリーjavascript「MooRevolver」サンプル

記事作成：2007年10月12日

前の記事：超手軽にレイアウトを作成するjavascript「Simple Layout Manager」
次の記事：javascriptライブラリ「mootools」でポップなメニューを作成する