フェード１３■フェードで８方向ランダム移動リンク有

■2016/01/13：即時関数で囲んで、グローバル変数を消しました。
■フェード１２■フェードで８方向ランダム移動リンク無■を改造しました。
８方向にランダムに移動しながら、フェードイン・フェードアウトで切り替わるスライドショーで、リンクも付けられます。
画像もリンクも JavaScript の中で記述できます。見本では２枚だけリンクを付けています。

注意事項は改造元と同じく、スライドショー開始時に最後の画像が表示されるという事です。
気になるようならCSSに「#mn div{opacity:0;}」と記述して下さい。
記述するとスライドショー開始時に、最後の画像は表示されずに空白から始まります。

原本は教えて!goo の「babu_baboo さんの回答」から。

<!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:#ec8;}/*★背景色薄オレンジ色。お好みで*/

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

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

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

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

</head>
<body>

<!--★コピーここから。下の１行がスライドショー位置指定。id="mn"は必須-->
<div id="mn"></div>

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

//★画像とリンクの同時指定。増減可能。["画像","リンク"];　の２個をこの順番で記述。リンクが無い時は["画像",""];で
var ga= new Array;
ga[n++]=["gy1.jpg","http://www.yahoo.com"];
ga[n++]=["gy2.jpg","http://www.google.com"];
ga[n++]=["gy6.jpg",""];
ga[n++]=["fr7.jpg",""];
ga[n++]=["gy5.jpg",""];

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

function autoChanger(e,i0,u,i1){
var sss="";
for (n=0; n<ga.length; ++n) {
sss+=(ga[n][1]!="")?"<div><a href="+ga[n][1]+"><img src="+ga[n][0]+" style='position:absolute;top:0;left:0;'></a></div>":"<div><img src="+ga[n][0]+" style='position:absolute;top:0;left:0;'></div>";
}
document.getElementById("mn").innerHTML=sss;
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()*8);
x=[0,w,0,-w,w,w,-w,-w][r]; y=[-h,0,h,0,h,-h,h,-h][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>

フェード１３■フェードで８方向ランダム移動リンク有 最終修正日 : 2016/01/13

　フェード１３■フェードで８方向ランダム移動リンク有　　　　最終修正日 : 2016/01/13