背景スライド４■bodyもどき・全面敷詰

●2016/04/04：即時関数で囲んで、グローバル変数を消しました。
全面敷詰指定の背景画像のスライドショーです。

前回掲載分はbodyの背景画像の敷詰指定でした。
しかしチラつき防止のためにbodyではなくdivで全面に領域を作って、その背景画像をスライドさせる方法に修正しました。
修正理由の詳細は、こちらから。

CSSで背景画像の最初の１枚目を指定していますが、指定しなくても動作します。
ただJavaScriptが動作しない場合に備えて、指定しておく方が安全。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景スライド４■bodyもどき・全面敷詰</title>

<!--★コピーここから-->
<style type="text/css"><!--
#bgD{
position:fixed;top:0;left:0;/*★位置指定。固定。左上指定*/
z-index:-1;/*★bodyの背景のように扱うため z-indexはマイナス指定。数値は調整可能*/
background:url(fi9.jpg);/*★背景画像指定。最初の１枚を記述*/
width:100%;/*★横幅一杯*/
height:100%;/*★縦幅一杯*/
}
--></style>
<!--★コピーここまで。bodyにもコピー有り-->

</head>
<body>

<!--★コピーここから。下記１行が背景スライド位置指定-->
<div id="bgD"></div>

<div style="background:rgba(255,255,255,0.7); margin:100px 15% 50px; padding:30px;">
文<br>章<br>見<br>本。<br><br>不要なら削除。<br>
</div>


<script type="text/javascript"><!--
//スライド背景　全面敷詰div===============================================
(function (){var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["OB61.png","hosisora1.jpg","4x999orenji_ki.png","fp8.jpg"];
var myurl="";        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分  
var spd=5000;　      //★画像切替時間 1000=1秒

//指定ここまで------------------------------------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}
function chbg(){
/*■下記１行をdocument.body.style.backgroundImage="url("+myurl+ga[i%len]+")";とするとbody用背景になりますがチラつきます*/
bgD.style.backgroundImage="url("+myurl+ga[i%len]+")";
i++; setTimeout(chbg,spd);
}
chbg();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景スライド４■bodyもどき・全面敷詰 最終修正日 : 2016/04/04

　背景スライド４■bodyもどき・全面敷詰　　　　最終修正日 : 2016/04/04