skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像をスライド表示させるjavascript「iCarousel」

｜ ｜ ｜ ｜ ｜ ｜ ｜

Web上には無限のスペースがあるとはいえ、やはりディスプレイの表示領域には限界があります。
Fabio Zendhi NagaoのiCarouselを使用すると、ニュースティッカーや画像のスクロール表示をすることが出来ます。
今回は商品説明などでよく使われるような、画像のスライド表示を説明します。

使用方法
iCarouselからダウンロードしたiCarousel.jsとjavascriptライブラリmootools.jsをダウンロードします。
この2つと以下のスクリプトをhead内に埋め込みます。
<script type="text/javascript">
window.addEvent("domready", function() {
var Carousel = new iCarousel("メイン画像用id", {
idPrevious: "previous",
idNext: "next",
idToggle: "undefined",
item: {
klass: "メイン画像用class",
size: メイン画像幅のサイズpx
},
animation: {
type: "scroll",
duration: 1000,
amount: 1
}
});
$("サムネイルidA").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(0)});
$("サムネイルidB").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(1)});
$("サムネイルidC").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(2)});
// 以下画像分表記

});
</script>

HTMLは以下の様に書きます。
<div id="お好きなid名">
<ul id="content">
<li class="メイン画像用class"><img src="メイン画像URI" alt="slide 1"></li>
<li class="メイン画像用class"><img src="メイン画像URI" alt="slide 2"></li>
<li class="メイン画像用class"><img src="メイン画像URI" alt="slide 3"></li>
// 以下画像分表記
</ul>
<div id="frame">
<ul>
<li><a href="#"><img id="サムネイルidA" src="サムネイル画像URI" alt=""></a></li>
<li><a href="#"><img id="サムネイルidB" src="サムネイル画像URI" alt=""></a></li>
<li><a href="#"><img id="サムネイルidC" src="サムネイル画像URI" alt=""></a></li>
// 以下画像分表記
</ul>
</div>
</div>
さらにCSSは以下の通りです。
#お好きなid名 {
position: relative; /* important */
overflow: hidden; /* important */
width: メイン画像幅px; /* important */
height: メイン画像高さpx + サムネイル画像高さpx + margin; /* important */
margin: 0;
}
#content {
position: absolute;
top: 0;
margin-left: 0;
}
#content,#content li {
list-style: none;
margin: 0;
padding: 0;
}
#content li a {
border:none;
}
#content {
width: メイン画像幅px × 枚数;
}
#お好きなid名 ul li {
display: block;
float: left;
margin: 0;
padding: 0;
border: none;
background-color: #fff;
}
#お好きなid名 ul li img {
display: block;
}
#frame {
position: relative;
margin: メイン画像高さ + margin 左右の空白 0;
}
#frame ul li {
margin: 0 2px;
}
#frame ul li img{
border: 1px solid #9cf;
padding: 2px;
}
#frame ul li img:hover {
border: 1px solid #369;
}
画像をスライド表示させるjavascript「iCarousel」サンプル

記事作成：2007年08月06日

前の記事：フォームの項目をチェックするjavascript「fValidator」
次の記事：テキストボックスを伸長させるjavascript「Text Grow」