ボタンがクリック時のイベント処理を追加する
続いて、ナビゲーションボタンがクリックされた時の処理を作成します。HTMLを準備する際、ボタンには以下のID名を割り当てました。
【ID名の割り当て】
- 前へ：YUI3_slideshow_prev
- 次へ：YUI3_slideshow_next
それぞれのボタンに対してイベントを設定していきます。ID名の場合はone()／all()ではなく、get()メソッドを使って要素を取得します。ボタンがクリックされるとclickイベントが発生するので、on()を使って以下のように定義します。
【イベントの定義】
// 次へ、ボタンが押された時の処理
Y.get('#YUI3_slideshow_next').on('click', function(){
if (counter < photoList.length-1) setAnime(counter++, counter);
});
「次へ」ボタンがクリックされると、最後の画像でなければsetAnime()関数を呼び出します。setAnime()関数は、第1引数に次に表示する画像の番号、第2引数に現在表示している画像の番号を指定します。
setAnime()関数では表示中の画像をフェードアウトさせ、同時に、次に表示する画像をフェードインさせます。フェードアニメーションの処理はこれまでと同じです。
【フェード処理】
function setAnime(pos1, pos2){
(new Y.Anim({
node: photoList[pos1],
duration : fadeTime,
to : { opacity : 0.0 }
})).run();
(new Y.Anim({
node: photoList[pos2],
duration : fadeTime,
to : { opacity : 1.0 }
})).run();
}
ここまでをまとめたものがサンプル01です。ボタンをクリックすると画像がフェードしながら切り替わります。
サンプル01の実行画面。次へボタンをクリックすると画像がフェードしながら切り替わる
●サンプル01（スクリプト＝YUI_slideshow.js）
YUI().use('anim', function(Y){
Y.on('load', function(){
var photoList = [];
var counter = 0;
var fadeTime = 2.0; // フェード時間
var firstPhoto = Y.one('.yui3-slideshow');
var posX = firstPhoto.getX();
var posY = firstPhoto.getY();
Y.all('.yui3-slideshow').each(function(ele){
ele.setX(posX);
ele.setY(posY);
photoList.push(ele);
});
// 最初の一枚目を表示する
(new Y.Anim({
node: photoList[0],
duration : fadeTime,
to : { opacity : 1.0 }
})).run();
// 前へ、ボタンが押された時の処理
Y.get('#YUI3_slideshow_prev').on('click', function(){
if (counter > 0) setAnime(counter--, counter);
});
// 次へ、ボタンが押された時の処理
Y.get('#YUI3_slideshow_next').on('click', function(){
if (counter < photoList.length-1) setAnime(counter++, counter);
});
// フェードアニメーション処理
function setAnime(pos1, pos2){
(new Y.Anim({
node: photoList[pos1],
duration : fadeTime,
to : { opacity : 0.0 }
})).run();
(new Y.Anim({
node: photoList[pos2],
duration : fadeTime,
to : { opacity : 1.0 }
})).run();
}
});
});
