今回は、CSSアニメーションを使って、ちょっとしたスライドショーを作ります。

サンプルを見る

今回のサンプルは、setIntervalを使って、画像をローテーションさせ、アニメーションをtransitionで定義しています。

※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。 残念ながら現時点ではIEは「transitionプロパティ」には対応していません。

実装する前に

まずは、実装する前に、今回のコンテンツの実装方法についての考え方から入っていきます。それでは、下の図を見てください。

スライドショーを実現するには、このように、常に末尾を先頭に移動するという処理を繰り返すことで実現できそうです。

それには、配列の「popメソッド」と「unshiftメソッド」を利用します。 「popメソッド」は、配列の末尾を削除し、 「unshiftメソッド」は、引数で渡された値を、配列の先頭に挿入します。

下記のサンプルを見てください。

サンプルを見る

このサンプルでは、数字の並びを、末尾の数字を先頭に持ってきて並び替えて、１行ずつ出力しています。 実行結果を見ると、前の行の末尾が、次の行では先頭に来ていることが分かると思います。 では、コードを見てみましょう。

<script>
var boxArray = ["1" , "2" , "3" , "4" , "5" , "6"];
var htmlText = "";
var ID;
var counter = 0;
$(function ()
{
    ID = setInterval(intervalFunc , 2000);
});
function intervalFunc()
{
    var len = boxArray.length;

    for(var i = 0 ; i < len ; i++)
    {
        htmlText += boxArray[i] + "　";
    }
    htmlText += "<br>";
    $("#info").html(htmlText);

    //配列を入れ替える
    var tmp = boxArray[len - 1];
    boxArray.pop();
    boxArray.unshift(tmp);

    counter++;
    if(counter == 6)
    {
        clearInterval(ID);
    }
}
</script>

「popメソッド」と「unshiftメソッド」を利用して、移動させるのに重要なのは

//配列を入れ替える
var tmp = boxArray[len - 1];
boxArray.pop();
boxArray.unshift(tmp);

この3行だけです。

この3行を含んだ「intervalFunc」をsetIntervalを使って繰り返し処理を行います。

「var tmp = boxArray[len - 1];」で、変数「tmp」に一旦配列の末尾を格納し、「popメソッド」で、配列の末尾を削除、その後「unshiftメソッド」で、変数「tmp」に一旦格納した、配列の末尾の値を、配列の先頭に挿入してやると、見事配列の末尾を先頭に移動させることが出来ました。

次回は、いよいよアニメーションを実装していきましょう。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。

クリエイター向け転職・派遣情報サイト「マイナビクリエイター」より転載