cloud-carousel：複数画像を後ろから前に回転表示するJs

複数の画像を後ろから前に回転しながら表示させてます。

1．CSSの記述

<style type="text/css">
<!--
#idCarousel {
	position: relative;
	width:900px;
	height:500px;
	overflow:scroll;
}
#idTitle{
	font-weight:bold;
	padding-bottom:7px;
}
.left{
	display:none;
	width:40px;
	height:40px;
	position:absolute;
	bottom:0;
	left:20px;
	font-weight:bold;
	font-size:30px;
	cursor:pointer;
}
.right{
	display:none;
	width:40px;
	height:40px;
	position:absolute;
	bottom:0;
	right:20px;
	font-weight:bold;
	font-size:30px;
	cursor:pointer;
}
.left:hover,
.right:hover{
	color:#666666;
}
-->
</style>

2．読込むJsとJavaScriptの記述

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="cloud-carousel.1.0.5.js"></script> 
<script type="text/JavaScript" src="jquery.mousewheel.js"></script> 
<script>
$(function(){
  	$("#idCarousel").CloudCarousel({
  			xPos: 450,
  			yPos: 100,
  			buttonLeft: $("#left"),
  			buttonRight: $("#right"),
  			altBox: $("#idAlt"),		//alt
  			titleBox: $("#idTitle"),	//title
  			bringToFront:true,			//クリック画像を前に移動
  			mouseWheel:true,			//マウスホイール回転
  			autoRotate:true,			//自動回転
  			autoRotateDelay: 3000		//回転速度
  	});
}); 
</script>

3．HTMLの記述例

<div id="idCarousel">


<div id="idTitle"></div>


<div id="idAlt"></div>

        
        <img class="cloudcarousel" src="images/i1.jpg" alt="画像1" title="1個目の画像"> 
        <img class="cloudcarousel" src="images/i2.jpg" alt="画像2" title="2個目の画像"> 
        <img class="cloudcarousel" src="images/i3.jpg" alt="画像3" title="3個目の画像"> 
        <img class="cloudcarousel" src="images/i4.jpg" alt="画像4" title="4個目の画像"> 
        <img class="cloudcarousel" src="images/i5.jpg" alt="画像5" title="5個目の画像"> 
        <img class="cloudcarousel" src="images/i6.jpg" alt="画像6" title="6個目の画像"> 
        <img class="cloudcarousel" src="images/i7.jpg" alt="画像7" title="7個目の画像"> 
        <img class="cloudcarousel" src="images/i8.jpg" alt="画像8" title="8個目の画像"> 
        <img class="cloudcarousel" src="images/i9.jpg" alt="画像9" title="9個目の画像"> 
        <img class="cloudcarousel" src="images/i10.jpg" alt="画像10" title="10個目の画像">
        

<div id="left" class="left">←</div>


<div id="right" class="right">→</div>


</div>
<!--/idCarousel-->

cloud-carousel：複数画像を後ろから前に回転表示するデモページ

ソース元：Professor Cloud

何かちょっとカッコいい感じな気がします。