jQueryでプラグインを使わずにスライドショーを実装する
今回はスライドショーのアニメーションについて書き記しておきたいと思います。
デモ
サンプル1
アニメーションの主な機能としては
1，ボタン ( ＜ 、＞ ) を押す度にスライド (clickイベント)
2，一定時間ごとにスライド (setIntervalイベント)
の2つになります。実際のアニメーションは、横に順番に並べていって、それをずらしているだけです。
本番では枠(id=”hogeCase”)に overflow: hideen をかけて隠しているだけです。
それだけです。
サンプル2 (overflowなし)
HTMLコードとjQueryコードです。
まずはHTMLコードです。
[html]
<div id="hogeCase">
<div id="hoge1" class="hogeClass">
hoge1 <!– 最初の記事 –>
</div>
<div id="hoge2" class="hogeClass">
hoge2 <!– 2番目の記事 –>
</div>
<div id="hoge3" class="hogeClass">
hoge3 <!– 3番目の記事 –>
</div>
<div id="hoge4" class="hogeClass">
hoge4 <!– 4番目の記事 –>
</div>
<div id="hoge5" class="hogeClass">
hoge5 <!– 5番目の記事 –>
</div>
</div>
<div id="switch">＜</div>
<div id="switch2">＞</div>
[/html]
それぞれのコンテンツ単体のサイズは、幅100px、高さ40px です。
横に並べているのは 前回記事 のやり方で、WordPressまかせにしています。
それらを動かしているスクリプトのコードです。
[javascript]
var manyDiv = $(".hogeClass").size(); // スライドコンテンツの総数を取得
var warpPX = (Math.ceil(manyDiv/2) – 1) * -100 + "px"; // 左端の値(ワープをスタートさせる位置)
var slidePX = (Math.floor(manyDiv/2) – 1) * 100 + "px"; // ワープ後（右端）の値
for (var i=1; i <= manyDiv; i++){ // ループ開始 −↓
var hoge = "#hoge" + i; // コンテンツのID取得（連番）
var hogeLeft = $(hoge).css("left"); // コンテンツの位置取得
var hogeWidth = $(hoge).width(); // コンテンツの移動量を取得
if (hogeLeft == warpPX){ // コンテンツの位置がワープさせる位置（端）かどうか
$(hoge).css({"left":slidePX}); // 左端から右端へワープさせる
}
else { // ワープしない場合 コンテンツの幅分、左へアニメーションスライド
$(hoge).animate({
left: "-=" + hogeWidth + "px"
}, "slow"
});
}
} // ループ終了ー↑
[/javascript]
アニメーションさせる値の取得
[javascript]
var manyDiv = $(".hogeClass").size(); // スライドコンテンツの総数を取得
var warpPX = (Math.ceil(manyDiv/2) – 1) * -100 + "px"; // 左端の値
var slidePX = (Math.floor(manyDiv/2) – 1) * 100 + "px"; // ワープ後（端）の値
[/javascript]
まず、変数manyDiv で記事の数を取得します。今回では記事数を5つにしていますので、5 です。記事数の増減に合わせて自動化させています。
つづいて 変数warpPX で左のはじっこの記事の位置を取得しています。今回の場合では-200pxになります。
記事が奇数の場合は左右に同じ記事数が並びますが、偶数の場合は左側の記事が少なくなるように設定しています。(サンプル2参照)
左のはじっこの記事は左スライドした瞬間に逆サイドの右はじへワープするようにしています。
そして 変数slidePX でワープ後(つまり右端の位置) を取得します。
スライドのアニメーションとワープの条件
[javascript]
for (var i=1; i <= manyDiv; i++){ // ループ開始 −↓
var hoge = "#hoge" + i; // コンテンツのID取得（連番）
var hogeLeft = $(hoge).css("left"); // コンテンツの位置取得
var hogeWidth = $(hoge).width(); // コンテンツの移動量を取得
if (hogeLeft == warpPX){ // コンテンツの位置がワープさせる位置（端）かどうか
$(hoge).css({"left":slidePX}); // 左端から右端へワープさせる
}
else { // ワープしない場合 コンテンツの幅分、左へアニメーションスライド
$(hoge).animate({
left: "-=" + hogeWidth + "px"
}, "slow"
});
}
} // ループ終了ー↑
[/javascript]
アニメーションの命令と、はしっこだったら逆サイドへワープさせる命令を 記事ひとつひとつに命令します。
[javascript]
var hoge = "#hoge" + i; // コンテンツのID取得（連番）
var hogeLeft = $(hoge).css("left"); // コンテンツの位置取得
var hogeWidth = $(hoge).width(); // コンテンツの移動量を取得
[/javascript]
変数hoge へ IDのおしりに連番を付けて代入します。
そのIDの位置情報を取得して 変数hogeLeft へ入れます。
同様にIDから幅を取得し、幅の分だけ移動(アニメーション)させます。
[javascript]
if (hogeLeft == warpPX){ // コンテンツの位置がワープさせる位置（端）かどうか
$(hoge).css({"left":slidePX}); // 左端から右端へワープさせる
}
[/javascript]
そしてコンテンツの位置がはしっこにあれば、逆サイドへワープさせます。
[javascript]
else { // ワープしない場合 コンテンツの幅分、左へアニメーションスライド
$(hoge).animate({
left: "-=" + hogeWidth + "px"
}, "slow"
});
}
[/javascript]
はしっこじゃなければそのままスライド(アニメーション)させます。
上記の内容を for文でループさせて全記事に対して行います。
今日はこのあたりで！
これでアニメーション自体の命令は完了です。スライドはちゃんと動くと思います。今回は左ボタンですが、右は値のプラスマイナスを入れ替えるだけでOKです。
ですが、これをclickイベントに組み込むと、ボタン連打されるとバグっちゃいます。
アニメーションが終わる前に次の命令が始まってしまい、記事がどんどん重なってしまいます。記事が重なると隠れて見えなくなってしまう記事が出たり、なんにもない空間ができてしまったりします。
次は ボタン連打対策をカキカキしていきたいと思います。
