skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

amazonライクにぐるぐる回るJavaScript「3D Image Carousel」

｜ ｜ ｜ ｜ ｜ ｜ ｜

最近amazonライクにぐるぐる画像を回すサイトが多くなっています。
今回はそんなぐるぐるを流行のjqueryで実現する3D Image Carouselです。

使用方法
3D Image CarouselのDownLoad Filesからファイル群をダウンロードします。
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="jquery.tooltip.min.js"></script>
<script type="text/javascript" src="jquery.carousel3d.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
<link href="carousel3d.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(function($) {
$(document).pngFix();
$("#carousel_images").html($("#holder_images").html()).carousel3d({
showTooltip: 1, //tooltipを表示（非表示は0）
textBox: 0 ,
radiusX: 200, //半径x軸
radiusY: 100, //半径y軸
centerX: 300, //位置x軸
centerY: 150, //位置y軸
perspective: 60 //透過
});
});
</script>
上記を記述したら、ぐるぐるさせたい画像を以下のように追記します。
<div class="carousel_wrapper">
<div id="carousel_images"></div>
</div>
<div id="holder_images">
<img title="タイトル" src="画像" alt="">
<img title="タイトル" src="画像" alt="">
<img title="タイトル" src="画像" alt="">
</div>
amazonライクにぐるぐる回るJavaScript「3D Image Carousel」サンプル

記事作成：2008年07月08日

前の記事：フォームで全自動でフリガナを付与するJavaScript「AutoKana.js」
次の記事：奥から手前にズームするJavaScript「Spacegallery.js」