[JS]背景画像にスライドやフェードの動きを付与できるプラグインjQuery.BgSwitcher

Javascriptスニペット

2014.11.16

複数の背景画像をスライドで横に動かしたり、フェードイン、フェードアウトで切り替えたりすることができるjQueryプラグイン>jQuery.BgSwitcherのご紹介です。

jQuery.BgSwitcher ファイルのダウンロード
jQuery.BgSwitcher の使い方

jQuery.BgSwitcher ファイルのダウンロード

以下のページよりjQuery.BgSwitcherのファイルを一式ダウンロードします。
jQuery.BgSwitcher

jQuery.BgSwitcher の使い方

ダウンロードしたjquery.bgswitcher.jsを、jqueryファイルと一緒に設置します。

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.bgswitcher.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".contents").bgswitcher({
    images: [
	"./images/image_1.jpg",
	"./images/image_2.jpg",
	"./images/image_3.jpg",
	"./images/image_4.jpg"
	],
	effect: "drop",
	easing: "swing",
	loop: true
  });
});
</script>

$(document).ready(function(){

$(".contents").bgswitcher({

images: [

"./images/image_1.jpg",

"./images/image_2.jpg",

"./images/image_3.jpg",

"./images/image_4.jpg"

effect: "drop",

easing: "swing",

loop: true

});

</script>

imagesに背景画像を複数枚設定します。

あとはeffect、easing、loopなどの各エフェクトをサイトに合わせて設定していくのですが、以下のページで jQuery.BgSwitcherで使えるエフェクトを確認することができますので、
実際にスライドさせたりしながら、設定してみましょう。
Demo – jQuery.BgSwitcher

もし、上手く背景画像が表示されない場合は、背景画像を表示させる要素に以下のようなCSS を別途指定してみてください。

.contents	{
	width:100%;//値はサイトに合わせて
	min-height:500px;//値はサイトに合わせて
	position:relative;
	background-position:50% 0;
	background-repeat:no-repeat
}

.contents {

width:100%;//値はサイトに合わせて

min-height:500px;//値はサイトに合わせて

position:relative;

background-position:50% 0;

background-repeat:no-repeat

}

当方のデモページでもjQuery.BgSwitcherを動かしてみましたので、こちらも是非参考にしてみてください。

jQuery.BgSwitcher で背景画像をスライドさせるデモ