その他　時間４■フェードで時間差表示 imgランダム

●2017/06/11：即時関数で囲んで、グローバル変数を消しました。
2017/06/11：Firefoxでf12キーでチェックするとコンソールでエラー発生するので修正。

■フェードで指定順に表示されるJavaScriptはこちら → 時間１■フェードで時間差表示 id

上記を改造しました。
時間差のフェードインで、次々に画像が表示されるJavaScriptです。
改造元との違いは、フェードで表示される要素指定が、「id」ではなく「img」であるところです。
「id="boxF"」を指定した領域に記述した画像タグ「img src="●●"」は、全部フェードイン表示になります。
表示の順番は、ランダムです。

~~ただし不完全で表示速度が均等ではありません。表示速度を速くすることで、ごまかしています（笑）。~~
2016/04/15：完全バージョンになりました！
inamenaiの日記を参考に、getElementsByTagName("img")を配列に置き換え、表示済みを重複させないことで表示速度を均等にしました。

■imgが HTML の記述順に表示されるJavaScriptはこちら → 時間３■フェードで時間差表示 img

<!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>その他　時間４■フェードで時間差表示 imgランダム</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{ background:#eee;}/*★背景色薄灰色。お好みで*/

/*★必須。画像の表示領域*/
#boxF{
margin:30px auto;/*★位置(上下、左右)*/
width:780px;/*★(画像横幅＋余白)×並べたい枚数より少し大きめで*/
}

/*★必須。時間差のフェード表示するimgの指定*/
#boxF img{
opacity:0;/*★必須。最初は透明*/
transition:opacity 1s ease;/*★必須。フェード変化時間。1sは１秒*/
width:185px;/*★画像横幅*/
height:122px;/*★画像縦幅*/
margin:2px;/*★画像同士の余白*/
}
--></style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<p style="margin-top:50px; text-align:center;">■最後の画像だけ見本でリンクが付いています。■</p>

<!--★ここからコピー。id="boxF"の中に記述されたimgタグの付いた画像は、全部上から順番にフェードする。最後の画像だけリンク付き-->

<div  id="boxF"><!--★フェード領域開始。id="boxF"必須-->

<img src="../slide/a1.jpg" alt="">
<img src="../slide/a2.jpg" alt="">
<img src="../slide/a3.jpg" alt="">
<img src="../slide/a4.jpg" alt="">
<img src="../slide/a5.jpg" alt="">
<img src="../slide/fr1.jpg" alt="">
<img src="../slide/fr2.jpg" alt="">
<img src="../slide/fr3.jpg" alt="">
<img src="../slide/fr4.jpg" alt="">
<img src="../slide/fr5.jpg" alt="">
<img src="../slide/fr6.jpg" alt="">
<a href="../index.html"><img src="../slide/fr7.jpg" alt="" title="HOMEへ"></a>

</div><!--★フェード領域終了-->

<script type="text/javascript"><!--
/*================================================================================
フェードで時間差表示 imgランダム：2017/06/11
getElementsByTagName("img")を配列に置き換える：By(inamenaiの日記) http://d.hatena.ne.jp/inamenai/20090204/p1
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var delay=1000;   //★何秒おきに表示するか指定。1000=1秒
var wt=500;       //★待機時間。ページが開いてからのフェードの開始を遅らせるかを指定。1000=1秒。0にするとすぐにフェードインが開始

//指定ここまで---------------------------------------------------------------------
var dv=document.getElementById("boxF").getElementsByTagName("img");
var arr=new Array(dv.length);// 取得したdvを配列に詰め替える
for (var i=0; i<dv.length; i++){arr[i]=dv[i];}
function fImg(){
var len=arr.length;
var r=Math.floor(Math.random()*len);//ランダム用
if (typeof arr[r] !=='undefined') {arr[r].style.opacity=1;}//Firefoxのコンソールのヒントより
arr.splice(r,1);//ランダム用。表示済みは重複させない
setTimeout(fImg,delay);//何秒おきに表示するか
}
setTimeout(fImg,wt);//最初の開始時間を遅らせる
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

時間４■フェードで時間差表示 imgランダム 最終修正日 : 2017/06/11

　時間４■フェードで時間差表示 imgランダム　　　　最終修正日 : 2017/06/11