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

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

背景画像をフルスクリーンでスライドショー出来る方法を紹介します。

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日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*