Web制作の現場で使えるjQuery　UIデザイン入門 ― 第23回

jQuery＋CSSによるカルーセルパネルの作り方 (2/3)

　スクリプト部分は次のようになります。

▼サンプル01（スクリプト部分）

$(function(){
    //初期設定
    $("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px");
    $("#carouselInner ul.column:last").prependTo("#carouselInner");
    $("#carouselInner").css("margin-left","-620px")
    //戻るボタン
    $("#carouselPrev").click(function(){
        $("#carouselNext,#carouselPrev").hide();
        $("#carouselInner").animate({
            marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px"
        },"slow","swing" , 
        function(){
            $("#carouselInner").css("margin-left","-620px")
            $("#carouselInner ul.column:last").prependTo("#carouselInner");
            $("#carouselNext,#carouselPrev").show();
        })
    })
    //進むボタン
    $("#carouselNext").click(function(){
        $("#carouselNext,#carouselPrev").hide();
        $("#carouselInner").animate({
            marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px"
        },"slow","swing" , 
        function(){
            $("#carouselInner").css("margin-left","-620px")
            $("#carouselInner ul.column:first").appendTo("#carouselInner");
            $("#carouselNext,#carouselPrev").show();
        })
    })
    
})

　2行目からの初期設定では、はじめにパネル全体を格納する#carouselInnerの横幅を設定しています。#carouselInnerの横幅は、表示領域の横幅（今回のサンプルの場合は620px）×パネル（ul.column）の数です。

$("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px");

　次に、prependTo()（関連記事)を使って、最後のパネル（ul.column）を#carouselInnerの先頭位置に移動します。css()でmargin-leftにネガティブマージン(マイナスの値を持つmargin値)を指定し、#carouselInnerを左方向に620pxずらします。

$("#carouselInner ul.column:last").prependTo("#carouselInner");
$("#carouselInner").css("margin-left","-620px")

　#carouseにoverflow:hiddenを設定しているため、ブラウザー上での表示は変わりませんが、実際には下の右側の画像のように、パネルの先頭に最後のパネルが移動した状態になります。

カルーセルの表示領域内は変わらないが、表示領域外では左側に最後のパネルが移動している

　続いて、「戻る」ボタン（#carouselPrev）の処理を作ります。#carouselPrevに対してclickイベント(関連記事)を設定し、クリックされるとパネルを左方向へスライド移動させる処理を記述します。

$("#carouselPrev").click(function(){
    (中略)
})

　clickイベントでは、まずhide()(関連記事)で、2つのボタンを非表示にします。スライド処理中にボタンがクリックされると表示位置の計算が狂ってしまいますので、一時的にクリックできないようにするためです。

$("#carouselNext,#carouselPrev").hide();

　次に、#carouselInnerをanimate()を使ってスライドさせます(関連記事)。「戻る」ボタンは左から右方向にパネルを移動させたいので、margin-leftに表示領域の幅（620px）を加算した値を設定します。すると、スライド全体が右方向にスライドし、表示中のパネル（ul.column）の前の位置にあるパネルが表示されます。css("margin-left")で取り出す値はparseIntで整数に変換してから表示領域分を加算します(関連記事)。アニメーションのスピードには「slow」、動きのスタイルには「swing」を設定します。

　スライドアニメーションが終わったあとの動作は、コールバック関数（関連記事）で設定します。初期設定と同じように、最後のパネル（ul.column）を#carouselInnerの先頭へ移動させ、#carouselInnerのmargin-leftを元の値に戻すことで、現在表示されているul.columnの先頭にul.columnが存在する状態を再び作ります。

　最後に、非表示にしていた2つのボタンを表示状態に戻せば、「戻る」ボタンの処理は完成です。

$("#carouselInner").animate({
    marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px"
},"slow","swing" , 
function(){
    $("#carouselInner").css("margin-left","-620px")
    $("#carouselInner ul.column:last").prependTo("#carouselInner");
    $("#carouselNext,#carouselPrev").show();
})

　「進む」ボタンにも同様の処理を設定します。「進む」ボタンの場合は、右から左にパネルをスライドさせたいので、margin-leftには表示領域分だけ減算した値を設定します。

marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px"

　また、最初のパネル（ul.column）をappendTo()(関連記事)で#carouselInnerの最後に移動させます。「戻る」ボタンの場合と逆の状態を作るわけです。

$("#carouselInner ul.column:first").appendTo("#carouselInner");

　以上で、カルーセルパネルが完成しました。