古籏一浩のJavaScriptラボ ― 第17回
Yahoo! UI Library 3版スライドショーの作り方
2009年10月27日 15時52分更新
スライド表示の初期設定
HTMLが準備できたらスクリプトを作成します。まず、スライド表示に必要な変数「photoList」「counter」「fadeTime」を定義します。「photoList」は表示する画像要素を格納する配列です。「counter」は表示中のスライドの番号で、photoList配列の要素番号として使います。fadeTimeは画像がフェードする時間です。ここでは「2.0」、つまり2秒間でフェードするように設定しています。
【変数の定義】
var photoList = [];
var counter = 0;
var fadeTime = 2.0; // フェード時間
次に、画像の表示位置を設定します。スライドショーは、スライド表示する画像（yui3-slideshowクラスを設定したimg要素）をすべて同じ位置に重ね合わせ、表示／非表示を切り替えていく仕組みです。そこで、HTML内の最初の画像のXY座標を取得し、他の画像に同じ座標を設定します。同じクラス名を持つエレメントから最初の1つを取り出すのは、one()メソッドを使います。画像のXY座標はgetX()／getY()メソッドで読み出して、いったん「posX」「posY」という名前の変数に入れておきます。
【座標値を読み出し】
var firstPhoto = Y.one('.yui3-slideshow');
var posX = firstPhoto.getX();
var posY = firstPhoto.getY();
続いて、読み出した座標値を、all()とeach()を使って対象となるすべての画像に設定します。座標はsetX()／setY()を使い、座標値をそれぞれの引数に指定すれば設定できます。ここでは、先ほど読み出した座標値を入れてあるposXとposYを指定します。また、座標を設定するついでに、読み出したエレメントをphotoList配列に格納していきます。
Y.all('.yui3-slideshow').each(function(ele){
ele.setX(posX);
ele.setY(posY);
photoList.push(ele);
});
初期設定が終わったら最初の画像をフェードインさせましょう。フェードインの処理は、前回の記事で説明した不透明度を変化させる方法（関連記事）と同じです。nodeにはphotoList配列の最初の要素を指定し、durationには変数「fadeTime」を指定します。これで最初の画像がフェードインで表示されます。
(new Y.Anim({
node: photoList[0],
duration : fadeTime,
to : { opacity : 1.0 }
})).run();
この連載の記事
- 第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の使い方
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
