背景スライド７■bodyもどき・下端固定ランダム敷詰

●2016/04/04：即時関数で囲んで、グローバル変数を消しました。
下端固定指定の背景画像のスライドショー。色違いの画像をスライドさせたら、GIFアニメのように見えます。
使用画像サイズ横290px縦150px。今回の背景画像切替はランダム指定です。

前回掲載分は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"><!--
body{background:#cde;}/*★背景色指定水色。お好みで*/

#bgD{
position:fixed;bottom:0;left:0;z-index:-1;/*★位置指定。固定。左下指定。bodyの背景のように扱うため z-indexはマイナス指定*/
background:url(mid1.png) repeat-x;/*★背景画像指定。横一列指定。最初の１枚を記述*/
width:100%;/*★横幅一杯*/
height:150px;/*★スライド画像の縦幅と同じ*/
}
--></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>

<!--★下記１行は猫の画像指定。不要ならこの行は削除-->
<div style="text-align:center;"><img src="ir4.png" style="width:300px;height:300px;"></div>

<script type="text/javascript"><!--
/*============================================================================
スライド背景　下端固定ランダム敷詰div  ★2016/04/04
同じ画像が二回連続で出ないランダムの参考：http://www.tagindex.com/kakolog/q4bbs/1201/1501.html(レス番1)
============================================================================*/
(function (){var i=0, prega, nowga; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["mid1.png","mid2.png","mid3.png"];
var myurl="";        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分  
var spd=1000;　      //★画像切替時間 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(){
prega=nowga;
while(prega===nowga){ nowga=ga[Math.floor(Math.random()*len)];}//■同じ画像が二回連続で出ないように
/*■下記１行をdocument.body.style.backgroundImage="url("+myurl+nowga+")";とするとbody用背景になりますがチラつきます*/
bgD.style.backgroundImage="url("+myurl+nowga+")";
i++; setTimeout(chbg,spd);
}
chbg();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景スライド７■bodyもどき・下端固定ランダム敷詰 最終修正日 : 2016/04/04

　背景スライド７■bodyもどき・下端固定ランダム敷詰　　　　最終修正日 : 2016/04/04