回転式の画像ギャラリー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」でポップなメニューを作成する
関連記事
人気記事
最新記事RSS
- JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
- でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
- mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
- これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
- MVPenでアナログの良さを考え直す。
- 第3回「マネタイズHACKS」に参加してみた。
- div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
- jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
- 入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
- iPhoneライクにスクロールさせるJavaScript「OverScroll」