背景画像をフルスクリーンで簡単スライドショー

背景画像がフルスクリーンで入れ替わります。

記事などをスクロールしても背景画像は固定されたままでなおかつスライドショー

このサンプルだと15秒間背景画像が表示され次の背景画像には5秒で切り替わります。

htmlコード

body直下に下記のコードを追加します。使用する背景画像のアドレス、幅、高さを変更してください。

<div class="bgslideshow">
<img  src="画像アドレス1" width="幅px" height="高さpx" alt="" />
<img  src="画像アドレス2" width="幅px" height="高さpx" alt="" />
<img  src="画像アドレス3" width="幅px" height="高さpx" alt="" />
</div>

JQueryコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">  
  $(function(){   
    $('.bgslideshow img:gt(0)').hide();  
    setInterval(function() {  
      $('.bgslideshow :first-child').fadeOut(5000)  
        .next('img').fadeIn(5000)  
      .end().appendTo('.bgslideshow');  
    }, 15000);
  });  
</script>

CSSスタイルシート

.bgslideshow { position: fixed; left:0; top:0; z-index: -1; height: 100%; width: 100%; }  
.bgslideshow img { position: absolute; min-height: 100%; min-width: 800px; width: 100%; height: auto;left:0; top:0; }