フェードイン&アウトするスライドショー

動くサンプルはこちら。以下、コードです。

まず、ULとLIのセットに画像を収めています。CSSは、ご覧のとおりですが、liにdisplay: none; & position: absolute; に設定しています。そして、最初のliに対しては、display: block;にしています。これで、3枚の画像が同じ位置に重なりつつも、最初の1枚目の画像だけが表示されることになります。

JSの方は、まず最初にコメントに書いた通りの変数を定義します。コンテナー(container = UL)の直下にある要素(LI)をフェードイン&アウトさせることになります。変数定義の後は、関数を定義し、最後にその関数を呼び出します。setIntervalやsetTimeoutを使って関数を一定間隔で呼び出す方法もありますが、ここではその方法は取らず、よりjQueryらしくします。

肝心のimgFadeInOut関数内では、まず切り替え対象の要素リスト(lists)を取得します。先に述べた通り、コンテナーの直下にある要素(.children())とします。 続いて、リストの最初の要素に対して、interval時間、キュー処理の遅延を指定します(.delay(interval))、その時間経過後、.fadeOut(speed)するよう指定します。 続けて、最初の要素(first)の次の要素(.next())に対して、interval時間、キュー処理の遅延を指定し、その時間経過後、.fadeIn(speed)するよう指定します。

このまま続けて、fadeIn()の第2引数にコールバック関数を書くことも可能ですが、変数宣言部分でそこまで書くのもどうかと思うので、jQueryの.promise()という仕組みを使い、promiseを受け取り、それに対してコールバック関数を仕掛けることにします(promise.done(...)の箇所)。このコールバック関数は、fadeInが完了したら呼ばれます。関数内では、最初の要素を念のため一旦、.hide()してから、コンテナーの最後に移動しています。そして、再度この関数を呼び出します。 これでひたすら画像がフェードイン&アウトを繰り返して表示され続けることになります。

できれば、こういう機能は、プラグイン化すれば使い易いのですが、このサンプルではそこまでしませんでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です