Maximage-ウィンドウサイズいっぱいに背景画像を表示
(スクリーンセーバー付き)
ウィンドウサイズいっぱいに背景画像を表示し、かつ画像が切り替わるjQueryです。
このページがサンプルになっています♪
[Maximage設定方法]
1)maxImage Scaling Pluginをダウンロードしておきます。
2)HTMLの記述を以下のようにします。
headタグ内には、事前にダウンロードした”jQuery”と”maxImage Scaling Plugin”を読み込むように記述しておきます。
背景でスライドショーにしたい画像の数に合わせて、bodyタグのすぐ下に記述しておきます。
<head> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.maximage.js" type="text/javascript"></script> </head> <body> <img src="背景画像へのパスを入れます" class="bgmaximage" alt="" /> <img src="背景画像へのパスを入れます" class="bgmaximage" alt="" /> <img src="背景画像へのパスを入れます" class="bgmaximage" alt="" /> <div id="maincontent"> ここにコンテンツを入れます </div> </body>
2)CSSの記述を以下のようにします。
背景画像用のCSSに display:none; を追記します。あとは先ほどと一緒です
.bgmaximage{ position:fixed !important; display:none; } #maincontent { position: absolute; top: 0; left: 0; z-index: 50; width: 100%; }
2)javascriptの記述を以下のようにします。
いくつかのオプションが追記されました。
・slideShow: true -スライドショーをオンにします
・slideShowTitle: false -画像に設定したタイトルを表示/非表示(true/false)
・slideDelay: 5 -スライドショーの切替時間設定(秒)
いいかがですか?さきほどの動きに加え、今度はスクリーンセーバーのように画像が切り替わったと思います。綺麗な画像で用意すると更にインパクトがありますね ♪