cloud-carousel.jsを使って複数画像を後ろから前に回転表示する方法｜DAD UNION

cloud-carousel.1.0.5.jsを使って複数のサムネイル画像を後ろから前に回転しながら表示させる方法をご紹介します。

Contents

複数画像を後ろから前に回転表示するCSSの記述
cloud-carousel.jsを使って複数画像を後ろから前に回転表示するJavaScriptの記述
cloud-carousel.jsを使って複数画像を後ろから前に回転表示すHTMLの記述
cloud-carousel：複数画像を後ろから前に回転表示するデモページ
ソース元：Professor Cloud

複数画像を後ろから前に回転表示するCSSの記述

※複数画像、矢印、画像No表示エリアのCSSを記述します。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:900px;
	margin:0 auto;
	text-align:left;
}
#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>

cloud-carousel.jsを使って複数画像を後ろから前に回転表示するJavaScriptの記述

※jquery.min.js、cloud-carousel.1.0.5.js、jquery.mousewheel.jsファイルを読み込みます。複数画像エリア（#idCarousel）に対して、位置・NEXT・PREVボタン・画像No・回転速度等を設定します。

<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>

cloud-carousel.jsを使って複数画像を後ろから前に回転表示すHTMLの記述

※複数画像エリア（id=”idCarousel”）に10枚を用意しました。画像No（id=”idTitle”）、画像のalt（id=”idAlt”）、NEXT（id=”right”）、PREV（id=”left”）ボタンになります。

<div id="idWrap">
	<h1>複数画像を後ろから前に回転表示します</h1>


    <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-->

</div><!--/idWrap-->