背景画像をフルスクリーンでスライドショー出来る方法を紹介します。
JQueryのプラグインは使わないで簡単なコードだけでスライドショーしますので設置も簡単で軽量だと思います。
背景画像をフルスクリーンで簡単スライドショーのサンプル
背景画像がフルスクリーンで、しかもスライドショーなので一気にカスタマイズしたような感じになり、インパクトばっちりです!
記事などをスクロールしても背景画像は固定されたままでなおかつスライドショーします。
それではコードを紹介します。
背景画像をフルスクリーンで簡単スライドショーのコード
背景画像をフルスクリーンで簡単スライドショーする為のコードはhtmlコード、JQueryコード、CSSコードを使い作成してあります。必要な箇所を書き換えてお使いください。
htmlコード
背景画像の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コード
背景画像のJQueryコードです。jquery.min.jsファイルがすでに入っている方は一番最初のjquery.min.jsの箇所は必要ありません。
fadeOut、fadeInの所に(5000)の数字が入ってます。これはフェードイン、フェードアウトが5秒で切り替わる時間です。それから最後の方の15000は15秒で次の画像に切り替わる時間です。時間はサイトに合わせて変更してください。
<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コード
背景画像の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; }
色んなブログで背景画像をフルスクリーンで簡単スライドショーは可能だと思います。ちなみにアメブロで背景画像をフルスクリーンで簡単スライドショーする方法は、アメブロの背景画像をフルスクリーンでスライドショーの記事にコードを紹介してますので参考にしてください。
最終更新日: 2013年3月11日