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

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

sponsors

使用方法

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>

サンプル

|

sponsors

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