jQueryプラグインで背景画像をスライドショー「Backstrech」

jQueryプラグインで背景画像をスライドショー「Backstrech」サンプル 背景画像全面に画像を置いて、切り替えるとインパクトがあります。
また写真さえよければ、その上にテキストを載せるだけでも良いデザインにすることができちゃいます。
jQueryプラグインのBackstretchはもともと画像をウィンドウ幅にあわせて背景ぴっちりに表示してくれるスクリプトですが、これをスライドショーにも活用できます。

使用方法
Backstretchからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.backstretch.js"></script>
<script>
var images = [
"画像パス1",
"画像パス2",
"画像パス3"
];

$(images).each(function(){
$("<img/>")[0].src = this;
});

var index = 0;

$.backstretch(images[index], {speed: 500});
//1枚目が表示されるまでの時間ミリ秒

setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
//スライド間の時間
</script>
以上で完成です。
jQueryプラグインで背景画像をスライドショー「Backstrech」サンプル

sponsors

「jQueryプラグインで背景画像をスライドショー「Backstrech」」をシェアする

記事作成:
記事URL:

TOP > > jQueryプラグインで背景画像をスライドショー「Backstrech」