オリジナルjQuery プラグインの作り方 【実践編】スライダー

[`brogumura` not found]

*ここで制作するプラグインのサンプルはGitHubで見ることが出来ます。

前回までの記事ではjQueryのプラグインの作り方の基礎の基礎を紹介しましたが、前回作ったプラグインはあくまでプラグインの作成方法を紹介するためのサンプルで実用的なものではありませんでした。

そこで今回は一定時間で画像を切り替える少し実用的なプラグインを作ってみたいと思います。さらに、オプションで画像切り替えの時間、切り替え効果(フェード、上下左右スライド)も指定できるようにしてみましょう。

前回までのおさらい

以下のコードは前回作成したものです。オプションのオブジェクトを引数にとって、デフォルトのオブジェクトにextendしてオプションが設定されている場合はオプションの値に切り替えていました。

今回の記事で出来るもの


今回のプラグインの名前はsampleSlider、デフォルトは切り替え時間5秒で切替効果はフェードとします。そこでまずは以下のように書き換えてみます。

今回のプラグインの仕様
  • 任意のクラスを振った要素の中のimg要素を任意の時間ごとに任意の切替効果で表示を切り替えるとする
  • 任意のクラス内のimg要素の数は自由とする
  • デフォルトは切り替え時間5秒で切替効果はフェード、切り替えに要する時間は0.5秒(500ms)とする
  • 画像切り替え効果はフェード、上下左右方向のスライドとする
  • 任意のクラスを振った要素にはユーザーの方でwidth及びheightのスタイルは設定してもらうこととする

上記の仕様通りに作ってみましょう

HTMLのマークアップ、プラグインのオプションの指定はそれぞれ以下のようにされると想定します。

HTMLマークアップ(body内)

css(head内)

プラグインの設定(head内)

imgタグにopacity:0を設定しているのはプラグインが実行されるまでの間、画像が縦に並んで表示されるのを防ぐためです。

まずはデフォルトの設定のオブジェクトを作り、それぞれの効果の条件分岐を加えてみます。

ここの9行目で出てきたeachと言うのはプラグインが設定された要素それぞれに対して、という意味です。

プラグインが設定された要素は一つとは限らないからです。

そしてeachの引数に渡されたfunctionの第一引数はindexが、第二引数にはそれぞれのエレメントの参照が渡されます。

このファンクションの中で、settingオブジェクトの中のtransitionの値によって処理を条件分岐させていきます。

先ずはtransitionにfadeが設定されていた時の処理を書いていこうと思います。が、その前にimg要素ではwidthとheightがバラバラだった時にスライダーとしては都合がわるいのでそれぞれdiv要素の背景として設定してみたいと思います。

上のコードで、imgタグのsrc属性を背景に持ったdivを作成し、css3のcoverなどのスタイルを設定、そして元のimgタグを消去しています。

画像切り替え(フェード効果)の実装

いよいよ本題の画像切り替えに移ります。

今は画像切り替えはクラスの切り替えだけで行い、アニメーションはcss3で設定するのが普通なのですが、付属のcssファイルを読み込み必須にするとプラグインとしては少々設置が面倒になってしまします。css3のアニメーションを使用しつつ、付属のcssファイルを読み込み必須にしない方法もあるのですが、それだと今度はプラグインの解説として難易度が上がってしまいますので、今回は少々古い方法(IE8対応)の方を紹介したいと思います。

以下がjqueryのanimateを使用してでフェードを実装したコードです。

46行目から69行めまでが画像の切り替えとフェード効果のjQueryです。imageChange()というファンクションをsetIntervalで繰り返し実行しています。この第二引数にsettingオブジェクトのchangeTimeを渡して画像切り替えの間隔が設定の値を反映するようにしています。

ここまで読んでよくわからないことがありましたらこの記事にコメントしていただければ出来る限り返信したいと思います。

次回は上下左右のスライドを効果を設定していこうと思います。

*ここで制作したプラグインのサンプルはGitHubで見ることが出来ます。

Please follow and like us:
20

andy

プログラマ、フロントエンドエンジニアです。 1988年生まれ Java(JavaEE,JavaFX,Android),Javascript,TypeScript,Angularjs,Backbone.jsなど使っています フリーランスです。 ご相談お待ちしております。 GitHub github.com/kotaroyamame *イラスト制作moom

オリジナルjQuery プラグインの作り方 【実践編】スライダー」への2件のフィードバック

コメントを残す

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

*