このページの本文へ

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

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


この連載の記事

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

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

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

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