このページの本文へ

Yahoo! UI Library 3版スライドショーの作り方 (3/6)

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();


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く