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="http://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

何かカッコいい感じもしますが、
スペースもある程度取るので使い所も難しい気もします。