古籏一浩のJavaScriptラボ ― 第17回

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

2009年10月27日 15時52分更新

文● 古籏一浩

ボタンがクリック時のイベント処理を追加する

　続いて、ナビゲーションボタンがクリックされた時の処理を作成します。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();
        }
    });
});