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

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

sponsors

「回転式の画像ギャラリーjavascript「MooRevolver」」をシェアする

記事作成:
記事URL:

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