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 -スライドショーの切替時間設定(秒)



いいかがですか?さきほどの動きに加え、今度はスクリーンセーバーのように画像が切り替わったと思います。綺麗な画像で用意すると更にインパクトがありますね ♪

ウェブデザインラボ