スライダーといえば、プラグインを使って導入するのが普通ですが、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を使えば、いろんなことが案外簡単にできてしまいます。
ぜ日、活用してみてください。