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」サンプル
コメントする
記事作成：2011年7月 1日 11:43
