jQueryでプラグインを使わずにスライドショーを実装する

2012.4.18 jQuery anime.jpg

こんにちは! 5年ぶりの4連休 初日の @dutchisover です!

Anime

今回はスライドショーのアニメーションについて書き記しておきたいと思います。

デモ

サンプル1

hoge1
hoge2
hoge3
hoge4
hoge5
<
>

アニメーションの主な機能としては

1,ボタン ( < 、> ) を押す度にスライド (clickイベント)
2,一定時間ごとにスライド (setIntervalイベント)

の2つになります。実際のアニメーションは、横に順番に並べていって、それをずらしているだけです。
本番では枠(id=”hogeCase”)に overflow: hideen をかけて隠しているだけです。
それだけです。

サンプル2 (overflowなし)

hoge1
hoge2
hoge3
hoge4
hoge5
<
>

HTMLコードとjQueryコードです。

まずはHTMLコードです。

それぞれのコンテンツ単体のサイズは、幅100px、高さ40px です。
横に並べているのは 前回記事 のやり方で、WordPressまかせにしています。

それらを動かしているスクリプトのコードです。

アニメーションさせる値の取得

まず、変数manyDiv で記事の数を取得します。今回では記事数を5つにしていますので、5 です。記事数の増減に合わせて自動化させています。

つづいて 変数warpPX で左のはじっこの記事の位置を取得しています。今回の場合では-200pxになります。
記事が奇数の場合は左右に同じ記事数が並びますが、偶数の場合は左側の記事が少なくなるように設定しています。(サンプル2参照)
左のはじっこの記事は左スライドした瞬間に逆サイドの右はじへワープするようにしています。

そして 変数slidePX でワープ後(つまり右端の位置) を取得します。

スライドのアニメーションとワープの条件

アニメーションの命令と、はしっこだったら逆サイドへワープさせる命令を 記事ひとつひとつに命令します。

変数hoge へ IDのおしりに連番を付けて代入します。
そのIDの位置情報を取得して 変数hogeLeft へ入れます。
同様にIDから幅を取得し、幅の分だけ移動(アニメーション)させます。

そしてコンテンツの位置がはしっこにあれば、逆サイドへワープさせます。

はしっこじゃなければそのままスライド(アニメーション)させます。

上記の内容を for文でループさせて全記事に対して行います。

今日はこのあたりで!

これでアニメーション自体の命令は完了です。スライドはちゃんと動くと思います。今回は左ボタンですが、右は値のプラスマイナスを入れ替えるだけでOKです。

ですが、これをclickイベントに組み込むと、ボタン連打されるとバグっちゃいます。

Machinegun

アニメーションが終わる前に次の命令が始まってしまい、記事がどんどん重なってしまいます。記事が重なると隠れて見えなくなってしまう記事が出たり、なんにもない空間ができてしまったりします。

次は ボタン連打対策をカキカキしていきたいと思います。

最近の記事

Sponsored