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

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

sponsors

使用方法

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>

サンプル

thai1 thai2 thai3 thai4 thai5 thai6 thai7 thai8 thai9 thai10

sponsors

Javascriptサンプルページ一覧
skuare.net