スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」

背景画像をスライドショー風に見せるとサイトが印象的に見えます。
jQuery maxImage plugin: DemoはJavaScriptによりターゲット内の画像を最大表示してくれます。
これを利用して背景画像をスライドショーにします。

使用方法

jQuery maxImage plugin: Demoからjquery.maximage.jsをjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.maximage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.class名').maxImage({
		isBackground: true,
		slideShow: true,
		position: 'absolute',
		verticalAlign: 'bottom',
		slideShowTitle: true, //タイトルを出すかどうか
		slideDelay:5, //スライド間の秒数
		maxFollows: 'height',
		resizeMsg: {show: false}
	});
});
</script>

次に画像を記述します。

<img src="loading.gif" class="loader" />
<img src="画像パス1" title="1枚目の説明" class="class名" /> 
<img src="画像パス2" title="2枚目の説明" class="class名" />  

最後にCSSを記述して完成です。

.class名 { display:none; }
.loader  { position:absolute;z-index:9999;width:39px;height:39px;top:49%;left:49% }

サンプル

動いているでしょ・・・。

Javascriptサンプルページ一覧

skuare.net