合体１０-１　フェードのスライド内を複数浮遊

●2016/01/27：即時関数で囲んで、グローバル変数を消しました。
フェードイン・フェードアウトのスライドショーの上を、複数の風船が浮遊する JavaScript です。
フェードイン・フェードアウトのスライドショーの上を、１個の画像が浮遊する JavaScript は■合体１０■Sl+Fl■フェードのスライド内を浮遊■から。

このスライドショーを風船が浮遊する範囲指定にする場合、重なりの順序を指定する「z-index」の数値の指定がとても重要です。
数値が大きいほど上に重なり、マイナスの数値が大きいほど下に重なります。
「z-index」を使用するには「position:●●;」指定が必須です。

１．スライドショーの最初の初期値（何も指定しない時の数値）は「z-index:0;」です。
２．スライドショーの上に文字を書いたり、別の画像を置きたい時は、スライドショーをCSSで「z-index:-1;」とマイナス指定します。
　　borderの角丸指定の時も必須。
３．img（画像）には内側の影は指定不可ですが、imgをdivで囲んでからimgに「z-index:-1;」指定をすれば内側に影を指定できます。
４．この状態でスライドショー内の文章の初期値は「z-index:0;」です。
５．このスライドショー内で風船を飛ばすために風船の指定をJavaScriptでvar inZ=1;（z-index:1;の意味）と指定します。
６．この状態で、風船は文章の上を飛びます。
７．タイトル文字とか画像とかで、風船よりも上（手前）に表示したいモノには「z-index:2;」を指定します。

■合体元JavaScriptはこちら→　フェード１■超簡単な綺麗なフェードのスライドショー＋ kurt.grigg６■画像■　複数のキラキラ踊る（範囲指定）

■2016/01/27：ソース記述ミス修正

<!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:#fde;}/*★背景色指定。ピンク*/

/*★必須。スライド画像の位置指定と装飾用。枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bsM{
position:relative;/*★必須。基準位置の指定*/
margin:50px auto;/*★水平中央位置指定(上下、左右)*/
width:600px;/*★スライド画像の横幅*/
height:400px;/*★スライド画像の縦幅*/
border:solid 2px #fff;/*★白色の枠指定*/
box-shadow:inset 10px 10px 10px #333;/*★領域の内側に灰色の影指定*/
}

/*★必須。フェードスライド用の指定*/
#GaM1,#GaM2{
position:absolute;/*★#bsMを位置の基準にするためと画像２枚を同位置にするため*/
transition:2s ease-in-out;/*★フェード変化時間。1sは１秒*/
z-index:-1;/*●スライドの上に文字を記述するためと、内側に影を付けるため。borderの角丸指定の時も必須●*/
}
--></style>
<!--★ここまでコピー。別に、bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。ここからスライドショーの位置-->
<div id="bsM">
<img src="" id="GaM1"><img src="" id="GaM2"><!--★←スライド用-->
<br><p style="color:#fff;text-align:center;">―動くJavaScript―</p><!--★←この文章は見本なのでこの１行は削除。風船より下(奥)-->
</div>
<!--★ここまでスライドショーの位置-->

<script type="text/javascript"> <!--
/*=====================================================================
フェードのスライド内を画像複数がランダム移動　　★2016/01/27
画像複数ランダム移動　By　Random Movement Script by kurt.grigg@virgin.net(JS保管　http://www2.tky.3web.ne.jp/~ogura1/)
フェードのスライドショー　By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
========================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

//★浮遊画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var Pic=["msd23.png","msd20.png","msd_g100.png","msd_o150.png"];
var myurl2=""; //★浮遊画像パス。文書とは別のフォルダーなどに入っている時は指定。全浮遊画像共通部分
var nm=8;      //★浮遊画像表示数
var inZ=1;     //★浮遊と他の画像(文章)同士の重なり具合。1 以上を指定。他の画像(文章)との重なり具合で変更する
var spdF=50;   //★浮遊速度。原本10。数値が大きいほど遅い

//指定項目終了。ここからスライショー用-------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl1+ga[p];}
var j=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
j= (j<len-1) ? j+1 : 0;　　 //次の配列番号
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){ GaM1.src=myurl1+ga[j]; GaM1.style.opacity=1; GaM2.style.opacity=0; } //次の画像をセットする。フェードイン。フェードアウト
else{ GaM2.src=myurl1+ga[j]; GaM1.style.opacity=0; GaM2.style.opacity=1; } //次の画像をセットする。フェードアウト。フェードイン
setTimeout(myChange,spdS);    //指定速度周期に画像を更新する
}	
//ここから画像浮遊----------------------------------------
var n=Pic.length;
var load=new Array(); for(var q=0; q<n; q++){load[q]=new Image(); load[q].src=myurl2+Pic[q];}//画像先読み
var VB=0,HB=0,R=[],PB=[],RD=[],Y=[],X=[];
var D=[],SP=[],BY=[],BX=[];
for (var i=0; i<nm; i++){
document.write("<img src="+myurl2+Pic[i%n]+" id='pics"+i+"' style='z-index:"+inZ+";'>");
Y[i]=10;
X[i]=10;
D[i]=Math.floor(Math.random()*70+10);
SP[i]=Math.floor(Math.random()*4+2);/*MaxSpeed=4  MinSpeed=2の数値。大きいほど速い*/
}
function Curve(){
var plusMinus=[1,-1,2,-2,3,-3,0,1,-1,0,5,-5];
for (i=0; i<nm; i++){
R[i]=Math.floor(Math.random()*plusMinus.length);
RD[i]=plusMinus[R[i]];
}
setTimeout(Curve,1500);
}
function MoveRandom(){
var H=bsM.clientHeight;
var W=bsM.clientWidth;
var YS=bsM.clientTop+bsM.offsetTop;
var XS=bsM.clientLeft+bsM.offsetLeft;
for (i=0; i<nm; i++){
BY[i]=-(document.getElementById("pics"+i).offsetHeight);//修正
BX[i]=-(document.getElementById("pics"+i).offsetWidth);//修正
PB[i]=D[i]+=RD[i];
var y=SP[i]*Math.sin(PB[i]*Math.PI/180);
var x=SP[i]*Math.cos(PB[i]*Math.PI/180);
if (D[i] < 0){ D[i]+=360;}
Y[i]+=y; X[i]+=x; VB=180-D[i]; HB=0-D[i];
//Corner rebounds! not necessary but looks nice.
if ((Y[i] < 1) && (X[i] < 1)) {Y[i]=1;X[i]=1;D[i]=45;}
if ((Y[i] < 1) && (X[i] > W+BX[i])) {Y[i]=1;X[i]=W+BX[i];D[i]=135;}
if ((Y[i] > H+BY[i]) && (X[i] < 1)) {Y[i]=H+BY[i];X[i]=1;D[i]=315;}
if ((Y[i] > H+BY[i]) && (X[i] > W+BX[i])) {Y[i]=H+BY[i];X[i]=W+BX[i];D[i]=225;}
//Edge rebounds!
if (Y[i] < 1) {Y[i]=1;D[i]=HB;}  
if (Y[i] > H+BY[i]) {Y[i]=H+BY[i];D[i]=HB;}  
if (X[i] < 1) {X[i]=1;D[i]=VB;} 
if (X[i] > W+BX[i]) {X[i]=W+BX[i];D[i]=VB;} 
document.getElementById("pics"+i).style.top=Y[i]+YS+"px";
document.getElementById("pics"+i).style.left=X[i]+XS+"px";
document.getElementById("pics"+i).style.position="absolute";
}
setTimeout(MoveRandom,spdF);
}
//★全部のオンロード-----------------------------------------------
myChange();Curve();MoveRandom();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

合体１０-１■Sl+Fl■ フェードのスライド内を複数浮遊 UP日時 : 2016/01/27

　合体１０-１■Sl+Fl■　フェードのスライド内を複数浮遊　　　　　UP日時 : 2016/01/27