jQuery ウィンドウ全画面サイズの背景画像スライドショーを作成する方法

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは!今回のtipsは【ウィンドウ全画面サイズの背景画像スライドショーを作成する方法】です。ちょっと解りづらいのですが、フルウィンドウ(フルスクリーン)の画像スライダーのことです。

FullWindowSlider

本記事の内容をプラグイン化してみました。詳しくはコチラをご参照ください。

背景画像をwindowサイズに合わせる方法

CSS
div#mask,img.slide {
min-height: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
div#slideArea {
position: relative;
height:100%;
width:100%;
overflow: hidden;
}
img.slide{
z-index:1;
}
div#slider{position:relative;}
/*
以下slider以外の装飾用CSSです。
用途に応じて使い分けてください。
消していただいても問題ありません。
*/
div#contents{
width:300px;
height:230px;
position:absolute;
left:50%;
top:50%;
background:#000;
padding:30px;
margin:-145px 0 0 -180px;
z-index:3;
color: #fff;
font-size:12px;
}
div#mask{
z-index:2;
background:url(images/dotted_mask.png);
}
h1{
font-size:40px;
margin:0 0 10px 0;
font-family:arial;
}
a{
color:#fff;
text-decoration:none;
}
HTML

<div id="slideArea">
<div id="contents">
<h1>Full slider</h1>
<p>ここにテキストを挿入します。これはダミーテキストです。ここにテキストを挿入します。これはダミーテキストです。ここにテキストを挿入します。これはダミーテキストです。ここにテキストを挿入します。これはダミーテキストです。ここにテキストを挿入します。これはダミーテキストです。ここにテキストを挿入します。これはダミーテキストです。ここにテキストを挿入します。これはダミーテキストです。</p>
<p style="text-align:right;"><a href="">read more</a></p>
</div><!– close.contents –>
<div id="mask"></div>
<div id="slider">
<img class="slide" src="images/fullslide1.jpg">
<img class="slide" src="images/fullslide2.jpg">
<img class="slide" src="images/fullslide3.jpg">
</div><!– close.slider –>
</div><!– close.slideArea –>

正確には、背景画像ではなく画像を最背面に回り込ませるという手法になっています。画像サイズが十二分に大きい場合は【background:url(画像パス) fix center top;】で実装可能だと思います。場面場面に応じてカスタマイズしていただければと幸いです。

スライダー実装方法

jQuery

$(function(){
setInterval(
function(){
$("#slider img:last").animate({‘opacity’:’0′,},
{duration:2000,complete:
function() {
$("#slider img:last").clone().prependTo("#slider");
$("#slider img:first").css({‘opacity’:’1′});
$("#slider img:last").remove();
},
});
},6000);
});

以上になります。

ダウンロード

2012/07/05に追加