スライド表示の初期設定
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();
