こんにちは。
今回は背景画像を簡単に切り替える事ができるjQueryプラグイン「jQuery.BgSwitcher」!です。
背景画像を切り替える機会があり、jQueryプラグイン「jQuery.BgSwitcher」を使ってみたので紹介します。
背景画像を簡単に切り替える事ができるjQueryプラグイン「jQuery.BgSwitcher」!
jQuery.BgSwitcher
jQueryプラグイン「jQuery.BgSwitcher」をダウンロードしてみよう!
jQuery.BgSwitcherのサイトからjquery.bgswitcher.jsをダウンロードします。
jQueryプラグイン「jQuery.BgSwitcher」の使い方
html部分を記述します。
1 2 3 | <div class="box"> <p>テキスト</p> </div> |
jQuery本体とjquery.bgswitcher.jsを/bodyの手前に読み込みます。
1 2 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgswitcher.js"></script> |
その下に下記のスクリプトを記述します。
これがデフォルトの状態になります。
1 2 3 4 5 6 7 | <script type="text/javascript"> jQuery(function($) { $('.top_bg').bgSwitcher({ images: ['img/bg1.png', 'img/bg2.png', 'img/bg3.png'] }); }); </script> |
オプションは下記のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> jQuery(function($) { $('.top_bg').bgSwitcher({ images: ['img/bg1.png', 'img/bg2.png'], // 切り替える背景画像を指定します。 interval: 5000, // 切り替えの間隔を指定します。 loop: true, // 切り替えをループするかを指定します。 shuffle: false, // 背景画像の順番をシャッフルするかを指定します。 effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定します。 duration: 1000, // エフェクトの時間を指定します。 easing: "swing" // エフェクトのイージングを指定します。 }); }); </script> |
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
背景画像を切り替える時に使ってみてはどうでしょうか。
以上で背景画像を簡単に切り替える事ができるjQueryプラグイン「jQuery.BgSwitcher」!でした。