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

■最初のdivのバナー画像だけ見本でリンクが付いています。■
■バナー画像は見本なので、該当サイトの本物のバナーではありません。■
―2016/04/15 完全バージョンになりました！―

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

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

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

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

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

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

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

/*★必須。フェード表示の小さなdivを並べる表示領域*/
#boxD{
margin:30px auto;/*★位置(上下、左右)*/
width:700px;/*★(div横幅＋余白)×並べたい枚数より少し大きめで*/
}

/*★必須。時間差のフェード表示する小さなdivの個別の指定*/
#boxD div{
opacity:0;/*★必須。最初は透明*/
transition:opacity 1s ease;/*★必須。フェード変化時間。1sは１秒*/
display:inline-block;/*★必須。サイズ指定をして横並びするため*/
width:200px;/*★小さなdivの横幅*/
height:130px;/*★小さなdivの縦幅*/
margin:2px;/*★小さなdiv同士の余白*/
background:#fef;/*★背景色。薄いピンク*/
border-radius:10px;/*★角丸指定*/
border:solid 1px #d7b;/*★小さなdivの外枠線　赤紫色*/
padding:10px;/*★小さなdivとそのdivの中身との余白*/
box-shadow:5px 5px 10px #888;/*★影指定。濃い灰色*/
}
--></style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<p style="margin-top:50px; text-align:center;">■最初のdivのバナー画像だけ見本でリンクが付いています。■<br>
■バナー画像は見本なので、該当サイトの本物のバナーではありません。■<br>

<!--★ここからコピー。id="boxD"の中に記述されたdivタグは、ランダムにフェードする。最初のdivだけリンク付き-->

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

<div><a href="http://www.dynamicdrive.com/"><img src="../table/frc11.gif" alt="" title="ダイナミックドライブ"></a><br>説明文</div>
<div><img src="../table/frc12.gif" alt=""><br>説明文</div>
<div><img src="../table/frc13.gif" alt=""><br>説明文</div>
<div><img src="../table/frc14.gif" alt=""><br>説明文</div>
<div><img src="../table/frc15.gif" alt=""><br>説明文</div>
<div><img src="../table/frc16.gif" alt=""><br>説明文</div>
<div><img src="../table/pt1s.jpg" alt="" style="vertical-align: middle;"><span style="padding-left:1em;">説明文</span></div>
<div><img src="../table/pt2s.jpg" alt="" style="vertical-align: middle;"><span style="padding-left:1em;">説明文</span></div>
<div><img src="../table/pt3s.jpg" alt="" style="vertical-align: middle;"><span style="padding-left:1em;">説明文</span></div>
<div><img src="../table/pt4s.jpg" alt="" style="vertical-align: middle;"><span style="padding-left:1em;">説明文</span></div>
<div><img src="../table/pt5s.jpg" alt="" style="vertical-align: middle;"><span style="padding-left:1em;">説明文</span></div>
<div><img src="../table/pt6s.jpg" alt="" style="vertical-align: middle;"><span style="padding-left:1em;">説明文</span></div>

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

<script type="text/javascript"><!--
/*==================================================================================
フェードで時間差表示 divランダム：2017/06/11
getElementsByTagName("div")を配列に置き換える：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("boxD").getElementsByTagName("div");
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>

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

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