3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」

3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」サンプル トップページとかで告知エリアとしてメインビジュアルを大きい画像で回すケースが見受けられます。
多くがFLASHで実現しているかと思いますが、jQueryプラグインのProfessor Cloudでも実現が可能です。

使用方法 Professor Cloudからファイルをダウンロード。

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="cloud-carousel.1.0.5.js"></script>
<script type="text/javascript">
$(function(){
  	$("#id名").CloudCarousel({
  			xPos: 600, //x位置
  			yPos: 100, //y位置
  			bringToFront:true,  //クリックしたものを前面に
  			buttonLeft: $("#left"), //左へおくるボタンのID名
  			buttonRight: $("#right"), //右へおくるボタンのID名
  			altBox: $("#alt"),  //altを表示させるID名
  			titleBox: $("#title"), //titleを表示させるID名
  			mouseWheel:true, //mouseでも回せるか jquery-mousewheel.jsが必要
  			autoRotate:true, //自動で回すか
  			autoRotateDelay: 3000 //自動時の速度
  	});
});
</script>

あとは画像を書いていきます。
<div id="id名" style="width:幅; height:高さ;overflow:scroll">       
   <img class="cloudcarousel" src="画像パス1" alt="説明1" title="タイトル1" />
   <img class="cloudcarousel" src="画像パス2" alt="説明2" title="タイトル2" />
   <img class="cloudcarousel" src="画像パス3" alt="説明3" title="タイトル3" />
   <!-- 以下画像分 -->
</div>
<p id="left">左へ</p>
<p id="right">右へ</p>
<p>alt:<span id="alt"></span> title:<span id="title"></span></p>

3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」サンプル

sponsors

「3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」」をシェアする

記事作成:
記事URL:

TOP > > > 3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」