背景画像がフルスクリーンで入れ替わります。
記事などをスクロールしても背景画像は固定されたままでなおかつスライドショー
このサンプルだと15秒間背景画像が表示され次の背景画像には5秒で切り替わります。
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>
<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>
.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; }