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

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

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

文● 古籏一浩

スライドショーに自動再生機能を追加する

　スライドショーはサンプル02で一応完成ですが、最後におまけとして自動再生機能を追加してみましょう。といっても単純に画像をアニメーションで切り替えていけばよいのですが、ここではYUI 3のカスタムイベントを使ってみます。カスタムイベントは、ブラウザーなどで定義されているclickやmouseoverのイベントとは別に、制作者が独自のイベントを定義できる機能です。カスタムイベントの定義は簡単で、「名前:イベント名」とするだけです。ここでは「slide:click」としました。

　カスタムイベントの処理も通常のイベントと同様にon()を使って定義します。カスタムイベント名を指定する以外はまったく同じです。slide:clickイベントが発生した場合は次のスライドを表示するように、setAnime()関数を呼び出します。「次へ」ボタンの場合は、スライドショーの最後まで表示されたら何も起きませんでしたが、自動再生の場合は最初の画像に戻って繰り返し表示するようにします。

【カスタムイベント定義】


Y.get('#YUI3_slideshow_next').on('slide:click', function(){
    if (counter < photoList.length-1) {
        setAnime(counter++, counter, -150);
    }else{
        setAnime(photoList.length-1, 0, -150);
        counter = 0;
    }
});

　カスタムイベントは、fire()メソッドを使って任意のタイミングで発生できます。発生させたいカスタムイベント名をfire()の最初の引数に文字列で指定します。あとは、setTimeout()を使って一定時間後にカスタムイベントを発生させれば、自動再生機能のでき上がりです。

【自動再生処理】


function autoPlay(){
    Y.get('#YUI3_slideshow_next').fire('slide:click');
    setTimeout(autoPlay, 3000);
}
autoPlay();



		サンプル03の実行画面。スライドショーが繰り返し実行される

●サンプル03（スクリプト＝YUI_slideshow.js）


var counter = 0;
YUI().use('anim', function(Y){
    Y.on('load', function(){
        var photoList = [];
        var fadeTime = 1.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, 150);
        });
        //　次へ、ボタンが押された時の処理
        Y.get('#YUI3_slideshow_next').on('click', function(){
            if (counter < photoList.length-1) setAnime(counter++, counter, -150);
        });
        // フェードアニメーション処理
        function setAnime(pos1, pos2, offset){
            (new Y.Anim({
                node: photoList[pos1],
                duration : fadeTime,
                from   : { xy:[ posX, posY ] },
                to   : { opacity : 0.0, xy:[posX+offset, posY ] }
            })).run();
            (new Y.Anim({
                node: photoList[pos2],
                duration : fadeTime,
                from   : { xy:[ posX, posY ] },
                to   : { opacity : 1.0, xy:[posX, posY ] }
            })).run();
        }
        //　カスタムイベント定義
        Y.get('#YUI3_slideshow_next').on('slide:click', function(){
            if (counter < photoList.length-1) {
                setAnime(counter++, counter, -150);
            }else{
                setAnime(photoList.length-1, 0, -150);
                counter = 0;
            }
        });
        // 自動再生処理
        function autoPlay(){
            Y.get('#YUI3_slideshow_next').fire('slide:click');
            setTimeout(autoPlay, 3000);
        }
        autoPlay();
    });
});