その他　時間５■フェードで時間差表示 div

■最初のdivのバナー画像だけ見本でリンクが付いています。■
■バナー画像は見本なので、該当サイトの本物のバナーではありません。■

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

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

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

■divがランダムに表示される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>
■バナー画像は見本なので、該当サイトの本物のバナーではありません。■</p>

<!--★ここからコピー。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====================================================
(function (){ var i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

//指定ここまで---------------------------------------------------------------------------
var dv=document.getElementById("boxD").getElementsByTagName("div");
function fImg(){
if (typeof dv[i] !=='undefined') {dv[i].style.opacity=1;}//Firefoxのコンソールのヒントより
i++;
setTimeout(fImg,delay);}//何秒おきに表示するか
setTimeout(fImg,wt);//最初の開始時間を遅らせる
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

時間５■フェードで時間差表示 div 最終修正日 : 2017/06/11

　時間５■フェードで時間差表示 div　　　　最終修正日 : 2017/06/11