JQueryを使った簡単なスライダー

スライダーといえば、プラグインを使って導入するのが普通ですが、JQueryのアニメーションを使えば、簡単にできるはずと思い作ってみました。

ちょうど紙芝居の要領です。

5枚の画像があるとすると、あらかじめ、5枚目から4枚目、3枚目、、、1枚目というように重ねておいて、次の画像を出すときは、一番上にある画像を取っ払い、一番下に移動させます。

反対に、手前の画像に戻す時は、5枚目から1枚目に引っ張り出します。

まずは、デモを見ていただいて、コードの基本をご説明したいと思います。

以下では、デモにあるヨーロッパ旅行案内のつもりの最初のスライダーについてのご説明したいと思います。

なお、文字の部分は割愛しました。

JQueryとそのUI関係はあらかじめ読み込んでおいてください。

HTMLとCSSの部分

まず、HTML部分からです。

<?php
//画像の枚数、効果の種類、アニメーション時間を設定します。
 $totalcount=4;
 $effect='size'; //clip, bounce, puff, fade, blind, slide, drop, fold, highlight, pulsate, scale,shake, size
 $dtime="1500";
?>

<!--JavaScriptで読み込みやすいようにhiddenに値を入れておきます。-->
<input id="totalcount" type="hidden" value="<?php echo $totalcount;?>">
<input id="effect" type="hidden" value="<?php echo $effect;?>">
<input id="dtime" type="hidden" value="<?php echo $dtime;?>">

<!--ここからが本体です。-->
<div class="wrap">
    <?php for($cnt=$totalcount; $cnt>=1; $cnt--){?>
        <img class="img" id="<?php echo $cnt;?>" src="./img/img<?php echo $cnt;?>.jpg">
    <?php } ?></div>
<div class="prev" onclick="Prev()">〈</div>
<div class="next" onclick="Next()">〉</div>

まず最初に、画像の枚数、効果の種類、アニメーション時間を設定します。

コードのコメントに書いてあるように、エフェクトにはいろいろあります。

具体的には、以前の「JQueryのアニメーションを使ってみよう」をご覧ください。

ここでは、中央から拡大、中央へ縮小する「size」を採用しています。

デフォルトはもっと短い時間なので、アニメーションの実行時間として1,500ミリ秒を指定しています。

また、これらの値は、input要素のタイプhiddenを使って、値に設定しています。

JavaScriptからHTMLで使った値を呼び出したい時、あとでご説明するようにこうしておくと便利です。

本体部分は、まずwrap要素で枠を作り、その枠にピタリとはまるように、画像を重ねます。

idは、文字を入れる時に使っていますが、スライダーだけの場合であれば、なくても大丈夫です。

前後しますが、CSSのスタイル指定は次のようになっています(PC用のみです)。

.wrap {position: relative; margin-top: -20px; margin-left: 10%; width: 80%; height: 80vh;}
.img {position: absolute; width: 100%; height: 100%;}
.next {position: absolute; top: 50vh; left: 92%; font-size: 40px; cursor: pointer;}
.prev {position: absolute; top: 50vh; left: 5%; font-size: 40px; cursor: pointer;}

wrapで画面80%の幅、80vhの高さで枠を作っています。

wrapの枠にはposition: relativeとしておいて、子要素をposition: absoluteで位置を指定します。

画像を上乗せしていきたいので、absoluteを使います。

HTML で後から書いたほうが上になりますので、5枚目から1枚目へとループさせています。

画像ファイル名は、ここでは「img1」「img2」…というようにしており、imgという名のディレクトリに入れています。

JQueryの部分

<script>
totalcount=$('#totalcount').val();
effect=$('#effect').val();
dtime=parseInt($('#dtime').val());

window.onload=function(){
    timer1 = setInterval(Next, 4000);
}

function Next(){
    tt0=totalcount-1;
            ele=$('.img').eq(tt0);
            $(ele).hide(effect,dtime,function() {
                 $('.wrap').prepend(ele);
                 $(ele).css('display','block');
           });
}

function Prev(){
    tt0=totalcount-1;
            ele=$('.img').eq(0);
            $(ele).css('display','none');
            $('.wrap').append(ele);
            $('.img').eq(tt0).show(effect,dtime);
}
</script>

JavaScriptの方は、先ほどのhiddenに書いた変数をグローバルスコープで読み込みます。

varを付けずに読み込むと、script内のどこででも使える変数になります。

ついで、loadが終わって最初に実行するコードとして、タイマーの設定をします。

これで4秒ごとに関数Nexttが実行されます。

(※いつもこれだけで支障なく動いておりますが、書き方としてはもう少し良い方法があるかも?)

次に一番肝心なNextの関数です。

これがほんの6行で終わっているところが、この方式のすごいところです(笑)

簡単ですから、妙な動きをすることはほとんどないのではないでしょうか。

まず、tt0としてトータルの枚数より1だけ引いておきます。インデックス番号が話から割り振られるためです。

このような簡単なコードで済んでいることの秘訣は、idを利用せずに、5枚の画像要素に共通のクラス名(ここではimgにしました)を用いて、インデックス番号で取り扱っているところにあります。

この方式だと、最初の何番目の画像であろうと、紙芝居のように「紙」が一番後ろに移動させられると、0番目となります。

中身の画像とは関係なく、画像が何番目にあるかというところにだけ注目しています。

「$(‘.img’).eq(tt0);」とすると、クラス名imgのうちtt0番目の要素ということになります。

そして、それを「ele」に代入しています。

「$(ele).hide(effect,dtime,function() {    });は、要素の$(ele)に対して、画面から、ここではsizeのeffectで、dtimeの1,500ミリ秒をかけて、hide(消去)しています。

hideでは、要素が「display: none」の状態になることに注意してください。

「function(){ }」のむところはコールバック関数と呼ばれるもので、アニメーションが終わってから実行されます。

コールバック関数内では、親要素wrapの冒頭に要素eleを移動させます。

紙芝居で一番上の目に見えなくはなっていますが、その紙を一番最後に移動させることに相当します。

「prepend」を使うと、親要素の冒頭に挿入されます。

最後に「$(ele).css(‘display’,’block’);」でもう一度目に見える形に戻しておきます。

一番下にすでにあるので、目に見える形にしても、画面上は現れないというわけです。

Prev関数はNext関数のだいたい逆になります。

一番最後の画像をまず目に見えない状態にしてから、appendで一番上に移動させ、それから、今度はshowで表示します。

showとhideはちょうど反対の動きをします。

なお、今度ぱ、コールバック関数は必要ありません。画像が表示されれば、その後必要な処理は何もないからです。

まとめ

いかがでしたでしょうか。

スライダーといえば、プラグインを使うものと思っておられたかもしれませんが、JQueryを使えば、ほんの50行、肝心のscript部分も20数行で終わります。

id番号で一枚一枚識別せず、共通するclass名の要素の中での順番にだけ着目するので、煩雑さを回避できていると思います。

また、prependやappendを使うと、ちょうど紙芝居の紙を最後に移動させたり、一番上に戻したりする、移動の操作が簡単にできます(一般に「追加」と説明されていますので、複製されるかと思いきや、移動されるだけです)。

このようにJQueryを使えば、いろんなことが案外簡単にできてしまいます。

ぜ日、活用してみてください。