HOME > 制作 > Javascript > 背景画像を簡単に切り替える事ができるjQueryプラグイン「jQuery.BgSwitcher」！

背景画像を簡単に切り替える事ができるjQueryプラグイン「jQuery.BgSwitcher」！

Javascript

2015/11/18

こんにちは。
今回は背景画像を簡単に切り替える事ができるjQueryプラグイン「jQuery.BgSwitcher」！です。

背景画像を切り替える機会があり、jQueryプラグイン「jQuery.BgSwitcher」を使ってみたので紹介します。

背景画像を簡単に切り替える事ができるjQueryプラグイン「jQuery.BgSwitcher」！

jQuery.BgSwitcher

jquery-bg-switcher

DEMO DOWNLOAD

jQueryプラグイン「jQuery.BgSwitcher」をダウンロードしてみよう！

jQuery.BgSwitcherのサイトからjquery.bgswitcher.jsをダウンロードします。

jQueryプラグイン「jQuery.BgSwitcher」の使い方

html部分を記述します。

<div class="box">
  <p>テキスト</p>
</div>

</div>

jQuery本体とjquery.bgswitcher.jsを/bodyの手前に読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bgswitcher.js"></script>

1 2	<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgswitcher.js"></script>

その下に下記のスクリプトを記述します。
これがデフォルトの状態になります。

<script type="text/javascript">
jQuery(function($) {
    $('.top_bg').bgSwitcher({
        images: ['img/bg1.png', 'img/bg2.png', 'img/bg3.png']
    });
});
</script>

jQuery(function($) {

$('.top_bg').bgSwitcher({

images: ['img/bg1.png', 'img/bg2.png', 'img/bg3.png']

});

</script>

オプションは下記のようになります。

<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>