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

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

sponsors

使用方法

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>
以上で完成です。

サンプル

この裏
photo by 写真素材 足成【フリーフォト、無料写真素材サイト】
Javascriptサンプルページ一覧
skuare.net

sponsors