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

●2016/01/27：即時関数で囲んで、グローバル変数を消しました。
フェードイン・フェードアウトのスライドショーの上を、UFO が浮遊する JavaScript です。
前々回掲載分（削除済み）とは、スライドショーの JavaScript が違います。
さらに前回掲載分と比較すると、「border」を使用しても範囲指定が簡単になりました。
そのため「outline」使用分は削除しました。
フェードイン・フェードアウトのスライドショーの上を、複数の画像が浮遊する JavaScript は■合体１０-１■Sl+Fl■フェードのスライド内を複数浮遊■から。

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

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

■合体元JavaScriptはこちら→　フェード１■超簡単な綺麗なフェードのスライドショー＋ kurt.grigg４■画像■サンタが飛ぶ（範囲指定）

<!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:#abc;}/*★背景色指定。青灰色*/

/*★#bsM必須。スライド画像(=UFOが飛ぶ領域)の位置指定。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bsM{
position:relative;/*★必須。基準位置の指定*/
margin:100px auto 30px;/*★水平中央位置指定(上、左右、下)*/
width:640px;/*★スライド画像の横幅*/
height:350px;/*★スライド画像の縦幅*/
border:solid 10px #a82;/*★茶色の枠指定*/
box-shadow:inset 10px 10px 20px #000;/*★領域の内側に黒色の影指定*/
border-radius:30px;/*★角丸指定*/
}

/*★必須。フェードスライド用の指定*/
#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;">…地球ハ、広カッタ…</p><!--★←この文章は見本なのでこの１行は削除。UFOより下-->
</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=["kio8.jpg","kio9.jpg","kio10.jpg","kio11.jpg","kio12.jpg"];
var myurl="";              //★スライド用画像パス。文書とは別のフォルダーなどに入っている時は指定。スライド全画像共通部分
var spdS=5000;　           //★スライド画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする
var Pic="../m7/tono1.gif"; //★浮遊する画像指定
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=myurl+ga[p];}
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;　　 //次の配列番号
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){ GaM1.src=myurl+ga[i]; GaM1.style.opacity=1; GaM2.style.opacity=0; } //次の画像をセットする。フェードイン。フェードアウト
else{ GaM2.src=myurl+ga[i]; GaM1.style.opacity=0; GaM2.style.opacity=1; } //次の画像をセットする。フェードアウト。フェードイン
setTimeout(myChange,spdS);    //指定速度周期に画像を更新する
}	
//ここから画像浮遊----------------------------------------
document.write("<img src='"+Pic+"' id='pics' style='z-index:"+inZ+";'>");
var R=0,PB=0,RD=0,VB=0,HB=0;
var Y=10,X=10,D=Math.floor(Math.random()*60+10);
function Curve(){
var plusMinus=[1,-1,2,-2,3,-3,0,1,-1,4,-4];
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
setTimeout(Curve,1800);
}
function MoveRandom(){
var H=bsM.clientHeight;
var W=bsM.clientWidth;
var YS=bsM.clientTop+bsM.offsetTop;
var XS=bsM.clientLeft+bsM.offsetLeft;
var BY=-(pics.offsetHeight), BX=-(pics.offsetWidth);
PB=D+=RD;
var y=3*Math.sin(PB*Math.PI/180);/*SY=3を数値で*/
var x=5*Math.cos(PB*Math.PI/180);/*SX=5を数値で*/
if (D<0){ D+=360;}
Y+=y; X+=x; VB=180-D; HB=0-D;
//Corner rebounds! not necessary but looks nice.
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
//Edge rebounds!
if (Y < 1) {Y=1;D=HB;}  
if (Y > H+BY) {Y=H+BY;D=HB;}  
if (X < 1) {X=1;D=VB;} 
if (X > W+BX) {X=W+BX;D=VB;} 
pics.style.top=(Y+YS)+"px";
pics.style.left=(X+XS)+"px";
pics.style.position="absolute";
setTimeout(MoveRandom,spdF);
}
//★全部のオンロード-----------------------------------------------
myChange();Curve();MoveRandom();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

合体１０■Sl+Fl■ フェードのスライド内を浮遊 最終修正日 : 2016/01/27

　合体１０■Sl+Fl■　フェードのスライド内を浮遊　　　　　最終修正日 : 2016/01/27