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

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

使用方法
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「jQuery maxImage plugin」サンプル

sponsors

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

記事作成:
記事URL:

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