記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」

記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」サンプル 奥行き感を出しながら画像を回して表示させたい。
そんな時にはシンプルな記述で簡単導入できる「jQuery Rondell」を採用しましょう。

使用方法 Sebobo/jquery.rondellからファイル一式をダウンロード。
<link rel="stylesheet" href="jquery.rondell.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.rondell.js"></script>
<script>
$(function() {
$('#id名 > div').rondell({
autoRotation: { //自動再生設定
enabled: true,
direction: 0, //1で逆回り
delay: 5000 //遷移速度
}
});
});
</script>

自動再生の他にもコントローラーの設定、半径、拡大率、透過など多くの設定が可能です。
さて、HTML側は下記のように記述します。
<div id="id名">
<div>
<img src="画像パス1">
<p>キャプション</p>
</div>
<div>
<img src="画像パス2">
<p>キャプション</p>
</div>
<!-- 以下画像分 -->
</div>

記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」サンプル

sponsors

「記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」」をシェアする

記事作成:
記事URL:

TOP > > 記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」