フェード１１■フェードで４方向ランダム移動HTML記述

■2016/01/13：即時関数で囲んで、グローバル変数を消しました。
上下左右の４方向にランダムに移動しながら、フェードイン・フェードアウトで切り替わるスライドショーです。
見つけた時は、こんな短い JavaScript でこれほど複雑な動作ができるのかと感動してしまいました。
原本は教えて!goo の「babu_baboo さんの回答」から。
スライド画像にリンクを指定することもできます。
画像指定は JavaScript のソースの中ではなく、HTML の中で記述します。

一つだけ注意すること!!
このページを開くと、最初に表示されるのは「ウサギの画像」です。
ところがこの「ウサギの画像」は、実は５枚のスライド画像の中で、最後に指定した５番目の画像です。
最後（５番目）の画像→１番目の画像→２番目の画像→３番目→４番目→５番目→１番目・・・
後はそのままループ（繰り返）していきます。
画像順番にこだわらなければこれでもいいですが、気になるならCSSに「#mn div{opacity:0;}」と記述して下さい。
記述するとスライドショー開始時に、最後の画像は表示されずに空白から始まります。

■８方向に移動し、画像は JavaScript 内指定のJavaScriptはこちら→　フェード１２■フェードで８方向ランダム移動リンク無

この４方向移動の JavaScript を上記のような８方向移動へ変更する方法。
ソースの真ん中より少し下あたりの２行の
var r=Math.floor(Math.random()*4);
x=[0,w,0,-w][r]; y=[-h,0,h,0][r];
この部分を
var r=Math.floor(Math.random()*8);
x=[0,w,0,-w,w,w,-w,-w][r]; y=[-h,0,h,0,h,-h,h,-h][r];
と変更すると、８方向になります。

<!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>フェード１１■フェードで４方向ランダム移動HTML記述</title>

<!--★コピーここから-->
<style type="text/css"><!--

#mn,#mn div{ width:500px;height:330px; }/*★必須。スライド画像の縦と横のサイズ*/

#mn{
position:relative;/*★位置指定。必ずposition:●●;を使用して指定すること*/
margin:50px auto;/*★中央配置(上下 左右）。お好みで*/
overflow:hidden;/*★必須。mn領域からはみ出た分は非表示*/
border:solid 1px #888;/*★枠線灰色。お好みで*/
}

/*★↓この下に #mn div{opacity:0;} の１行をこのままコピーすると、開始時に最後の画像が表示されず空白からの開始になります*/

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

</head>
<body>

<!--★ここからコピー。id="mn"必須。スライドしたい画像を何枚でも記述。１行目と２行目だけ参考にリンク有り。不要なら削除-->
<div id="mn">
<div><a href="http://www.yahoo.co.jp/"><img src="pt35.jpg" alt=""></a></div>
<div><a href="https://www.google.co.jp/"><img src="pt36.jpg" alt=""></a></div>
<div><img src="pt37.jpg" alt=""></div>
<div><img src="pt39.jpg" alt=""></div>
<div><img src="pt42.jpg" alt=""></div>
</div>
<!--★スライド画像記述ここまで-->

<script type="text/javascript"><!--
/*-============================================================================================
フェードでスライドショー４方向ランダム移動リンク有　★2016/01/13
By　http://oshiete.goo.ne.jp/qa/5497200.html(教えて!goo　babu_babooさんの回答)
==============================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var delay=3000; //★スライドの次の画像に切り替わるまでの静止時間。1000=1秒
var spd=50;     //★スライドの方向移動速度。数値が大きいと遅い
var step=30;    //★スライド変化速度。数値が大きいと、透過の変化や移動速度が遅くなる

function autoChanger(e,i0,u,i1){
var e=document.getElementById("mn");
var t=0, s=e.style, c=0, o, p, q;
var i0=i0||delay, u=u||step, i1=i1||spd;
while(o=e.childNodes[c]){if('DIV'==o.nodeName){o.style.position='absolute';c++;}else{ e.removeChild(o);}}
o=100/u; W();
function C(){
var w=e.clientWidth, h=e.clientHeight;
var r=Math.floor(Math.random()*4);
x=[0,w,0,-w][r]; y=[-h,0,h,0][r];
vx=-x/u; vy=-y/u; c=u; p=0;
S(e.appendChild((q=e.firstChild,s=q.style,L(),q)))}
function S(){t=setInterval(function(){L();if(0==c--)return W();if(c){x+=vx;y+=vy;p+=o;} else{p=100;x=y=0;}},i1)}/*sx=syをx=yへ*/
function W(){clearInterval(t);t=setTimeout(C,i0)}
function L(){s.opacity=p/100; s.top=y+'px';s.left=x+'px';}
}
autoChanger();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

フェード１１■フェードで４方向ランダム移動HTML記述 最終修正日 : 2016/01/13

　フェード１１■フェードで４方向ランダム移動HTML記述　　　　最終修正日 : 2016/01/13