背景スライド１２■フェード背景ランダムスライド文字入り

●2016/06/12：即時関数で囲んで、グローバル変数を消しました。

■背景画像の順番表示で１枚絵の文字入りJavaScriptはこちら→　背景スライド１１■フェード背景スライド文字入り

上記のスライドショーをランダム切替に改造しました。
背景画像がフェードイン、フェードアウトで、ランダムにスライドショーをします。
ランダムですが、同じ背景画像が２回連続で出ることはありません。
CSSの指定を変更すれば、背景画像を敷詰から全面１枚表示に変えることもできます。

●角丸指定（border-radius）を付けると、ブラウザによって動作が違います。
ブラウザIEとFirefoxでは問題ないですが、クロムとオペラでは「overflow:hidden;」の指定を入れているのに、角丸部分が一時的に表示されます。
その防止のため、角丸指定（border-radius）だけは、「#waku」だけでなく「#Fb1,#Fb2」にも同じ記述を入れて下さい。

<!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"><!--

/*★必須。スライド表示位置とサイズと装飾指定。位置とサイズは必須。*/
#waku{
overflow:hidden;/*★必須。はみ出した部分を表示しない*/
position:relative;/*★必須。基準位置の指定。relativeでもabsoluteでもfixedでも可*/
margin:100px auto 50px;/*★水平中央位置指定(上、左右、下)*/
width:600px;/*★必須。敷詰なので横幅はお好みで指定*/
height:300px;/*★必須。敷詰なので縦幅はお好みで指定*/
border:solid 2px #000;/*★枠線指定。黒色。お好みで*/
border-radius:40px 0px;/*★角丸指定(左上右下、右上左下)。お好みで*/
box-shadow:5px 5px 10px #666 inset;/*★影指定。お好みで*/
}

/*★背景画像の表示方法指定。ここで何も指定しないと敷詰表示になります*/
#Fb1,#Fb2{
background-repeat:repeat;/*★敷詰表示。初期値が敷詰なので、この指定をしなくても敷詰になります*/
border-radius:40px 0px;/*★角丸指定(左上右下、右上左下)。お好みで●●#wakuでの指定と同じ。クロムとオペラ用。IEとFFは不要●●*/
}

/*★以下はスライド領域の文字の指定。不要なら削除。#wakuを基準としたposition:absolute;で指定*/
.title{ position:absolute; top:20px; left:20px; color:#f00;font-size:30px; text-shadow:3px 3px 3px #000;}
#waku p{ position:absolute; width:100%; bottom:10px; text-align:center; color:#fff; text-shadow:3px 3px 3px #000;}
/*★スライド領域の文字の指定ここまで*/

--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから-->

<div id="waku"><!--★スライド表示領域開始。id="wakuは必須"-->

<div id="Fsn"></div><!--★スライドショー分。id="Fsn"は必須-->

<div class="title">動くJavaScript</div><!--★タイトル分。不要なら削除-->
<p>－welcome－<br>コピーだけで動作するJavaScriptのサンプルを紹介するサイト</p><!--★見本文章分。不要なら削除-->

</div><!--★スライド表示領域終了-->


<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードのスライドを、文字入り背景画像のランダムスライドショーへ変更　　★2016/06/12
By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
同じ画像が二回連続で出ないランダムの参考：http://www.tagindex.com/kakolog/q4bbs/1201/1501.html(レス番1)
==============================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["ww1.jpg","ww2.jpg","ww3.jpg","ww4.jpg"];   
var myurl="";        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=4000;　      //★画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする
var csstr="transition:opacity 1s ease-in-out;"; //★CSSの背景色のフェード変化時間。1sは１秒。意味がわかるなら変更可

//指定ここまで---------------------------------------------------------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}
var prega, nowga;
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
prega=nowga;
while(prega===nowga){ nowga=myurl+ga[Math.floor(Math.random()*len)];}//■同じ画像が二回連続で出ないランダム
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
var a=document.getElementById("Fb1").style;
var b=document.getElementById("Fb2").style;
if (myflg==0){ a.backgroundImage="url("+nowga+")"; a.opacity=1; b.opacity=0; } //次の画像をセット。フェードイン。フェードアウト
else{ b.backgroundImage="url("+nowga+")"; a.opacity=0; b.opacity=1; } //次の画像をセット。フェードアウト。フェードイン
setTimeout(myChange,spd);    //指定速度周期に画像を更新する
}
var w=waku.clientWidth, h=waku.clientHeight;//フェード領域の横幅と縦幅
var cssf=csstr+'position:absolute; top:0; left:0; width:'+w+'px; height:'+h+'px;';
var sss='<div id="Fb1" style="'+cssf+'"></div><div id="Fb2" style="'+cssf+'"></div>';
document.getElementById("Fsn").innerHTML=sss;
var bb=document.getElementById("Fsn").style;
bb.width=w+"px";bb.height=h+"px";bb.position="absolute";bb.top=0;bb.left=0;bb.zIndex=-1;
myChange();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

背景スライド１２■フェード背景ランダムスライド文字入り UP日時 : 2016/06/12

　背景スライド１２■フェード背景ランダムスライド文字入り　　　　UP日時 : 2016/06/12