古籏一浩のJavaScriptラボ ― 第20回
飛び出すカルーセルをUIZE Frameworkで作る（前編）
2009年11月25日 13時00分更新
キャプションやナビゲーションをカスタマイズ
カルーセルで表示する画像にはキャプションを付けられます。キャプションは、<div class="carouselFrame">～</div>内に「carouselFrameTitle」というスタイルシートクラス名を付けたdiv要素を用意して記述します。これで画像と一緒にキャプションもスライドします。
<div class="carouselFrame" style="left:0px;">
<img src="photo/1.jpg">
<div class="carouselFrameTitle">松本城</div>
</div>
 |
|---|
| 画像の上にキャプションが表示される |
1枚ずつ画像を切り替えるナビゲーションに加えて、番号で画像を切り替えるナビゲーションも付けられます。その場合はset()を使い、pageXプロパティに表示したい画像の番号を指定します。番号は最初の画像が0、次の画像が1、その次が2……というように連番になっています。
scrolly.set({ pageX : 0 })
サンプル2は画像に対応したナビゲーションボタンを用意したものです。
 |  | |
|---|---|---|
| 画像の下に番号が表示されクリックすると対応する画像までスライドする | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UIZE カルーセルサンプル</title>
<link rel="stylesheet" href="css/page.content.css">
<link rel="stylesheet" href="css/widget.slideshow.css">
<link rel="stylesheet" href="css/carousel.css">
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<div class="scrollyCarousel">
<div id="page_scrolly-view" class="scrollyView">
<div class="carouselFrame" style="left:0px;">
<img src="photo/1.jpg">
<div class="carouselFrameTitle">松本城</div>
</div>
<div class="carouselFrame" style="left:600px;">
<img src="photo/2.jpg">
<div class="carouselFrameTitle">浅間山噴火</div>
</div>
<div class="carouselFrame" style="left:1200px;">
<img src="photo/3.jpg">
<div class="carouselFrameTitle">高ボッチ高原</div>
</div>
<div class="carouselFrame" style="left:1800px;">
<img src="photo/4.jpg">
<div class="carouselFrameTitle">三九郎（どんど焼き）</div>
</div>
<div class="carouselFrame" style="left:2400px;">
<img src="photo/5.jpg">
<div class="carouselFrameTitle">冬景色（長野県）</div>
</div>
<div class="carouselFrame" style="left:3000px;">
<img src="photo/6.jpg">
<div class="carouselFrameTitle">浅間温泉街</div>
</div>
</div>
<a id="page_scrolly_left" href="#" class="navButton" style="left:10px;"><div class="arrow towardsFirst gotoPrevious"></div></a>
<a id="page_scrolly_right" href="#" class="navButton" style="right:10px;"><div class="arrow towardsLast gotoNext"></div></a>
<br>
</div>
<div class="scrollyNavi">
[<a href="#" onclick="scrolly.set({ pageX : 0 })">0</a>]
[<a href="#" onclick="scrolly.set({ pageX : 1 })">1</a>]
[<a href="#" onclick="scrolly.set({ pageX : 2 })">2</a>]
[<a href="#" onclick="scrolly.set({ pageX : 3 })">3</a>]
[<a href="#" onclick="scrolly.set({ pageX : 4 })">4</a>]
[<a href="#" onclick="scrolly.set({ pageX : 5 })">5</a>]
</div>
<script type="text/javascript"><!--
Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.Scrolly'
],
builder:function () {
var page = window.page = new Uize.Widget.Page();
scrolly = page.addChild ('scrolly',Uize.Widget.Scrolly);
page.wireUi();
}
});
// --></script>
</body>
</html>
画像がスライドする時間を変更したい場合は、以下のようにset()を使ってdurationプロパティにミリ秒で指定します。
scrolly = page.addChild ('scrolly', Uize.Widget.Scrolly);
scrolly.fade.set({ duration:8000 }); // 切り替え時間
◆
後編では、複数の画像を切り替えて表示するカルーセルを作成します。
この連載の記事
- 第53回 Mac用ウィジェットをHTML/CSSで自作
- 第52回 Web技術で作るDashboardウィジェット開発入門
- 第51回 iOS 4.2×localStorageで作るGPSレコーダー
- 第50回 HTML5 SVGで作るシューティングゲーム
- 第49回 HTML5のInline SVGをJavaScriptで操作
- 第48回 HTML5で注目！インラインSVGの使い方
- 第47回 iOS 4.2の新機能で作るHTML5+JSアプリ
- 第46回 JavaScriptでEPUBビューアーを自作してみた
- 第45回 Audio Data APIでブラウザーをシーケンサーに！
- 第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方
- この連載の一覧へ
