基本の背景６■フェード変化の背景色

<!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>基本の背景６■フェード変化の背景色</title>

<!--★コピーここから-->
<style type="text/css"><!--
body{background:#ddd;}/*全体の背景色。灰色。お好みで*/

/*★必須。フェード背景領域の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#Fb{
width:100%;height:300px;/*★必須。フェード変化領域の横幅と縦幅*/
position:absolute;top:0;left:0;/*★必須。フェード領域の位置指定*/
z-index:-1;/*★必須。フェード領域を背景として上に文章や画像を載せるための指定。マイナス指定の数値は変更可*/
}

/*★タイトル文字指定。不要なら削除*/
#test1{
padding-top:20px;/*★中央位置*/
color:#fff;/*★文字色　白*/
font-size:32px;/*★文字サイズ指定*/
font-weight:bold;/*★太字指定*/
text-shadow:3px 3px 3px #555;/*★影指定。お好みで*/
opacity:0.7;/*★透過指定。文字を薄くする*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから。下の１行が表示領域位置指定。id="Fb"は必須-->
<div id="Fb"></div>

<div id="test1">◎動くJavaScript◎</div><!--★タイトル文字指定。不要なら削除-->
<div style="text-align:right;padding-top:10px;"><img src="mo10.gif"></div><!--★窓の画像指定。不要なら削除-->

<script type="text/javascript"><!--
/*-============================================================================================
フェード変化の背景色　By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
フェード切替のスライドショーを背景色変化に変更　★2016/06/09
==============================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★背景色指定。増減可能。背景色を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
//見本の背景色は、赤紫、黄、緑、水色、青紫。お好みで
var bc=["#e9d","#fe9","#cd8","#7cf","#a9c"];
var spd=5000;　                         //★画像切替時間 1000=1秒 スライド速度。下記のCSS指定のフェード変化時間より長くする
var csstr="transition:2s ease;";        //★CSSの背景色のフェード変化時間。1sは１秒。意味がわかるなら変更可

//指定ここまで----------------------------------------------------------------------------------------------------
var len=bc.length;
var i=-1;		                //現在表示している配列番号
var myflg=0;		                //どっちを表示して、どっちを消すかのフラグ
function myChange(){                    /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;　　             //次の配列番号
myflg=(myflg==0) ? 1 : 0;               //表示・非表示フラグ反転
var a=document.getElementById("Fbg1").style;
var b=document.getElementById("Fbg2").style;
if (myflg==0){ a.backgroundColor=bc[i]; a.opacity=1; b.opacity=0; } //次の画像をセット。フェードイン。フェードアウト
else{ b.backgroundColor=bc[i]; a.opacity=0; b.opacity=1; } //次の画像をセット。フェードアウト。フェードイン
setTimeout(myChange,spd);               //指定速度周期に背景色を更新する
}	
var w=Fb.clientWidth, h=Fb.clientHeight;//フェード領域の横幅と縦幅
var cssf=csstr+'position:absolute;width:'+w+'px;height:'+h+'px;';
var sss='<div id="Fbg1" style="'+cssf+'"></div><div id="Fbg2" style="'+cssf+'"></div>';
document.getElementById('Fb').innerHTML=sss;
myChange();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
基本の背景６■フェード変化の背景色 最終修正日 : 2016/06/09

　基本の背景６■フェード変化の背景色　　　　最終修正日 : 2016/06/09
