BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQueryプラグインを使わずに画像をフェードで切り替える方法
by 稲垣 稲垣

jQueryプラグインを使わずに画像をフェードで切り替える方法

jQueryプラグインを使わずに画像をフェードで切り替える方法

こんにちは。バイクのプチカスタムに勤しむデザイナーの稲垣です。

制作の際にいつもお世話になっているJavaScriptライブラリのjQuery。ちょっとしたアクセントを手軽につけられてとても便利ですよね。

巷には高機能なjQueryプラグインが溢れかえっていますが、シンプルな動きをつけたい場合、多すぎる機能がかえって邪魔になってしまったり、目的の動作に合致するプラグインが見つからず延々探し続けたりと、無為に時間だけが過ぎていくことも多々あります…(私だけでしょうか?)

そこで、簡単な動きのものなら自分でちゃちゃっと書いてしまおう!ということで、フェードで切り替わる画像スライダーを作ってみようと思います。

デモ

完成イメージはこちらになります。

 html、CSSを用意する

まず初めに、土台となるhtmlとcssを準備します。

jQueryライブラリは読み込んでいる前提で、必要最低限の記述のみざっくりいきます。

html

css

上記の記述を行い、一度ブラウザで確認してみてください。

#photo内の4枚の画像が重なり、最後のimg4.jpgのみが表示されます。

img1

jQueryで画像の順番を入れ替えてみよう

それでは肝心の動きの部分になります。今回のスライダーを作るにあたり、必要になる処理を全て書き出してみます。

img2

  1. 一番上のリストタグを複製して一番下へ挿入
  2. 挿入したタグの透明度を0に変更
  3. 透明度を0から100へアニメーションさせる
  4. 複製元のリストタグを削除する

以上4点の処理で画像の入れ替えができます。
こちらを1つずつjQueryを使って記述してみましょう。

一番上のリストタグを複製して一番下へ挿入

挿入したタグの透明度を0に変更

透明度を0から100へアニメーションさせる

複製元のリストタグを削除する

先述のanimate関数にコールバック関数を記述して、アニメーション終了時の処理を追加します。

ここまで書くと、一番下の画像が一番上へ移動するアニメーションができたと思います!あとはこれらの動きを数秒毎に繰り返しましょう。

○秒毎に指定の動きを繰り返す

ユーザー定義関数で処理をまとめる

繰り返しの処理を行うにあたって、先ほど記述した内容を一つの関数にまとめます。

これによって、

の記述のみで関数内にまとめられた処理を実行できるようになります。

今回の様に同じ処理を繰り返す時など、関数で括るとソースがスッキリします。後から別の動きを追加したくなった場合も書きやすくなるので、私はなるべく関数にまとめる様にしています。

setInterval関数で繰り返し処理

あとはまとめたphotoFade()の下にsetInterval()を追加します。

これで4秒毎に画像が切り替わるスライダーが完成しました!

終わり

以上、JavaScript初心者がおくる初心者のための記事でした。

本当は画像を切り替えるボタンもつけたかったのですが、長くなりそうなのでまた今度にします。

初心者ならではの「あちゃ~」な記述がたくさんありそうですが、その時はそっと教えてやってください。

プラグインの入れ過ぎでjsフォルダがもさもさになってしまう人へ少しでもお役に立てれば幸いです。

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る