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

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

使用方法
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」サンプル

sponsors

「amazonライクにぐるぐる回るJavaScript「3D Image Carousel」」をシェアする

記事作成:
記事URL:

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