その他　時間３■フェードで時間差表示 img

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

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

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

■imgがランダムに表示される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====================================================
(function (){   var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

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

</body>
</html>

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

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