簡単カルーセル作成 by roller@nolib.jp #JavaScript

の２つ目のサンプル、一つずつ見せるカルーセルの作り方です。

【基礎知識】
rollerは横長のブロック要素の中に、横並びに入れた要素を回転させるように見せます。横長のブロック要素をコンテナと呼びます。さらにコンテナを囲むブロック要素を用意します。この要素をビューと呼び、コンテナより小さいサイズを指定するとビューからはみ出した部分を隠す事が出来ます。また、コンテナの位置指定はビューからの相対座標です。

まずビューとコンテナにするタグを記述し、id属性をそれぞれ記述します。

<div id="samp2v" class="view">
    <div id="samp2c" class="container">
    </div>
</div>

ここではCSSをあてるためのclassも同時に記述しました。idで指定するのであれば特に記述は必要ありません。

次に回転させて見せる要素をコンテナの中に入れます。後で計算を簡単にするために、各要素の大きさを統一します。ここでは幅・高さ80px、左右マージン50pxで統一しました（CSSはリンク先のサンプルコードを参照してください）。

<div id="samp2v" class="view">
    <div id="samp2c" class="container">
        <img src="img/roller/ig01.png" />
        <img src="img/roller/ig02.png" />
        <img src="img/roller/ig03.png" />
        <img src="img/roller/ig04.png" />
        <img src="img/roller/ig05.png" />
        <img src="img/roller/ig06.png" />
        <img src="img/roller/ig07.png" />
        <img src="img/roller/ig08.png" />
        <img src="img/roller/ig09.png" />
        <img src="img/roller/ig10.png" />
    </div>
</div>

次に一つずつ回すための右へボタンと左へボタンを作成します。ここではビューの内側に相対指定で配置するため、ビューの中、コンテナの直下に記述しました。

<div id="samp2v" class="view">
    <div id="samp2c" class="container">
        <img src="img/roller/ig01.png" />
        <img src="img/roller/ig02.png" />
        <img src="img/roller/ig03.png" />
        <img src="img/roller/ig04.png" />
        <img src="img/roller/ig05.png" />
        <img src="img/roller/ig06.png" />
        <img src="img/roller/ig07.png" />
        <img src="img/roller/ig08.png" />
        <img src="img/roller/ig09.png" />
        <img src="img/roller/ig10.png" />
    </div>
    <nav id="tol2" class="tol" ><img src="img/toleft.png"/></nav>
    <nav id="tor2" class="tor" ><img src="img/toright.png"/></nav>
</div>

navタグで囲んでidやclassを指定していますが、これはCSSをあてるためと、後で処理に使うためであって、必ずしも必要ではありません。

さて、ここまで来たらいよいよ動きをつけていきます。

まずはjquery.jsとroller.jsをインクルードします。jquery.jsはこちらから取得できます。roller.jsは冒頭のサイトからダウンロードしてください。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://nolib.jp/js/roller.min.js" ></script>

次にdocumentがロードされた時にビューとコンテナをroller化します。scriptタグ内に以下を記述します。ビューとコンテナのid属性値を引数に設定します。

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c'});
});

デフォルトだとしばらく回転が慣性動作をするので、そく減速がかかるように慣性動作時間を０に指定します。

$(document).ready(function(){
var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0});
});

このままだと、初期表示で先頭要素が真ん中に表示されていません。位置をずらす設定値、displacementに60を指定して真ん中に配置されるようにします。

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0,
        displacement: 60});
});

デフォルトでは内部要素の大きさを自動設定しますが、今回内部要素の大きさをCSSで直接指定しているため、その機能を抑制します。合わせて、roller化が終わった後にコンテナの大きさと位置を調整する関数を呼び出します。

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0,
        displacement: 60,
        autoadjustheight: false,
        autoadjustwidth: false});
    samp2.setWidth(true);
});

これで見た目は整いました。この後はカルーセルらしい動きをさせるために一つ移動したら動きを止めて、ちょうど良い位置に位置合わせするコードを入れていきます。OnSkipは一つ要素が移動するたびに呼び出されるコールバック関数を指定できますので、ここでアニメーションをストップさせる関数を呼び出します。OnStopではアニメーションが止まった時のコールバック関数を指定できますので、ここでちょうどよい位置にアニメーションで動かすコードを実行します。具体的には以下のようにします。

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0,
        displacement: 60,
        autoadjustheight: false,
        autoadjustwidth: false});
    samp2.setWidth(true);
    samp2.setOnSkip(function(inertia, fchild, containerx){
        if(inertia){
            samp2.stopAnimation();
        }
    });
    samp2.setOnStop(function(disp, just){
        $('#samp2c').animate({left: just}, {duration: 200});
    });
});

inertiaがtrueの場合は慣性動作中であることを示します。falseの場合はスワイプやドラッグでの操作中ですので、アニメーションの停止は必要ありません。動作が停止した時にjqueryのanimateメソッドでちょうどよい位置に動かしています。引数で与えられるjustが一番近い（設定によります。止まるべき場所への）コンテナの座標です。

最後に右へボタン、左へボタンのクリックイベントハンドラで一つ動かす関数を呼び出す事で完成です。

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0,
        displacement: 60,
        autoadjustheight: false,
        autoadjustwidth: false});
    samp2.setWidth(true);
    samp2.setOnSkip(function(inertia, fchild, containerx){
        if(inertia){
            samp2.stopAnimation();
        }
    });
    samp2.setOnStop(function(disp, just){
        $('#samp2c').animate({left: just}, {duration: 200});
    });
    $('#tol2').on('click', function(evt){
        samp2.goLeft(1, 200);
    });
    $('#tor2').on('click', function(evt){
        samp2.goRight(1, 200);
    });
});

goLeft, goRight関数の第一引数は飛ばす要素の数で、第二引数は移動にかける時間です。

いかがでしたでしょうか？
複雑な処理が必要なカルーセルもちょっとした設定変更で作成可能です。より使いやすくする設定やその他のイベントハンドラの利用についてはこちらのサンプルコードを参照してください。

Android 2.x系からPCブラウザまで動作する軽いライブラリです。使っていただければ幸いです。