フェード１-１■ランダムでフェード

<!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"><!--
/*★必須。スライド画像の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bs{
position:relative;
margin:50px auto;/*★水平中央位置指定(上下、左右)*/
width:900px;/*★スライド画像の横幅*/
height:375px;/*★スライド画像の縦幅*/
}
/*★必須。フェードスライド用の指定*/
#Ga1,#Ga2{
position:absolute;/*★#bsを位置の基準にするためと画像２枚を同位置にするため*/
transition:2s ease-in-out;/*★フェード変化時間。1sは１秒*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから。下記１行は画像位置指定。id="bs"は必須-->
<div id="bs"></div>

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

//★画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=['gat111a.png','gat111b.png','gat111c.png','gat111d.png'];   
var myurl='';        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=4000;　      //★画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする

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 i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
prega=nowga;
while(prega===nowga){ nowga=ga[Math.floor(Math.random()*len)];}//■同じ画像が二回連続で出ないように
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){ Ga1.src=myurl+nowga; Ga1.style.opacity=1; Ga2.style.opacity=0; } //次の画像をセットする。フェードイン。フェードアウト
else{ Ga2.src=myurl+nowga; Ga1.style.opacity=0; Ga2.style.opacity=1; } //次の画像をセットする。フェードアウト。フェードイン
setTimeout(myChange,spd);    //指定速度周期に画像を更新する
}	
var sss='<img src="" id="Ga1"><img src="" id="Ga2">';
document.getElementById('bs').innerHTML=sss;
myChange();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
フェード１-１■ランダムでフェード 最終修正日 : 2016/01/21

　フェード１-１■ランダムでフェード　　　　最終修正日 : 2016/01/21
