Web初心者がjQuery イチから作るフェードイン・フェードアウトするスライドショーの実装方法(サンプル付き)

Web初心者がjQuery イチから作るフェードイン・フェードアウトするスライドショーの実装方法(サンプル付き)
今回は、web初心者向けにイチから作るフェードイン・フェードアウトするスライドショーのjQueryを実装します。

いままであまり詳しく解説を入れてなかったので今回解説を交えながら自動でスライドショーを作ってみます。

photo credit: castgen via photopin cc

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。
これが無いと動きません。

今回使うjQueryオブジェクト、コート STEP2

今回のスライドショーで使うjQueryのコードは「find」「fadeOut」「fadeIn」「appendTo」を使いますのでこの解説からします。

find

指定要素が持つ全子孫要素から、指定条件式に合致するものを選択する。

難しい言葉ですね。

簡単に言うと「探す」と言う機能です。

こんなhtmlがあったとします、
ソースを見るとspanで「雨」「曇り」が囲まれています。
これをfindを使ってこの文字を赤色にするには

記述します。

「pタグからfindでspan要素を探して、文字の色を赤くする。」ということです。

fadeOut

表示されている要素をフェードアウトさせます。

これは文字通り「フェードアウト(消えていく)」なので解説は必要ないかな。

fadeIn

表示されている要素をフェードインさせます。

これは文字通り「フェードイン(表示されていく)」なので解説は必要ないかな。

appendTo

要素の中身を他の要素に追加する。

これも難しいですね。

簡単に言うと「移動させる」と言う機能です。

こんなhtmlがあったとします、
これを表示させると

今日は雨です。明日は曇りです。
昨日は晴れです。

こうやって表示されますね。

で、appendToを使ってみます。

今日は雨です。明日は曇りです。
昨日は晴れです。

↓↓↓↓

昨日は晴れです。
今日は雨です。明日は曇りです。

移動します。

実際に動く記述を書きます STEP3

いきなりですが、今回のjQueryを書きます。

しくみ

  • 5秒後に画像が変わる
  • 表示されている画像がフェードアウトして一番最後に移動する
  • 次の画像をフェードインして表示させる

詳しく解説いいっても、ソースコードの中に書いてあることが全てなんですが。。。。

setInterval(switchImg, interval)
これについてちょっとお話します。

今回は5秒おきに画像が変わるスライドショーです。

setInterval(関数,ミリ秒)

↓↓

setInterval(switchImg, interval)

5秒ごとにswitchImgを実行します。

「○秒ごとに○○する」ということで、フェードイン・フェードアウト以外にも例えばオブジェクトを動かしたりすることができます。

HTMLを設置します STEP4

画像は何枚でも大丈夫です。
<div id=”slideshow”>も忘れないでください。CSSで制御する箇所がありますので。

CSSを記述します STEP4

画像が数枚あるので画像を一箇所に重ねるようにしました。

まとめ

[サンプル] jQuery イチから作るフェードイン・フェードアウトするスライドショーの実装方法

よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。(画像のパスは環境に合わせてください)
画像が自動で変わるjQueryは、サイトのメイン画像などでよく使われますのでぜひ試してみてください。

※firefox、クローム、IEで動いていることを確認しております。

Web初心者がjQuery イチから作るフェードイン・フェードアウトするスライドショーの実装方法(サンプル付き)

コメントを残す

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

*