jquery.backstretch.js:ブラウザサイズに合わせて複数の背景画像を切り替え表示してくれるJs



指定した複数のjpg背景画像を指定秒数で
フェード切替してみます。

過去に、
JQUERY.MAXIMAGE.JS:背景画像をFITさせ、かつその背景画像を切り替える方法
をご紹介しましたが同じ様な感じです。

1.読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.backstretch.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$.backstretch([
		"i1.jpg",
		"i2.jpg",
		"i3.jpg"
		], {
		fade: 500,
		duration: 3000
	});

});
</script>

2.HTMLの記述例

特に指定はありません。

jquery.backstretch.js:ブラウザサイズに合わせて複数の背景画像を切り替え表示するデモ

ソース元:Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page

解像度が高い画像を多く使い過ぎると画像の読込に
時間が掛かる可能性がありますね。