フェード１■超簡単な綺麗なフェードのスライドショー

●2020/05/08：即時関数で囲んで、グローバル変数を消しました。
綺麗なフェードイン、フェードアウトで、自動で切り替わるスライドショーです。
CSS3とJavaScriptの併用で、そのソースの短さと、フェードの自然な美しさに感動しました。
原本は、イヌでもわかるJavaScript講座から。少しだけソースを簡略化しました。

CSSで青い枠線の装飾を付けていますが、JavaScript のソースは■F 簡単１■自動スライド超簡単フェード版■と同じです。
ランダムで切り替わる JavaScript は■フェード１-１■ランダムでフェード■から。
2015/06/23：位置指定を簡単にできるように修正
2015/09/13：画像先読み込みとソースの簡略化
2020/05/08：ソースを微修正

<!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"><!--
/*★必須。スライド画像の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bs{
position:relative;
margin:100px auto 50px;/*★水平中央位置指定(上、左右、下)*/
width:450px;/*★スライド画像の横幅*/
height:300px;/*★スライド画像の縦幅*/
border:solid 5px #00f;/*★枠線指定。お好みで。青色*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから。下記１行は画像位置指定。id="bs"は必須-->
<div id="bs"></div>

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードイン・フェードアウトのスライドショー　　　　★2020/05/08　グローバル変数を削除　
By　http://cya.sakura.ne.jp/java/sshow2.htm(新サイト：イヌでもわかるJavaScript講座)
==============================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=['pt29.jpg','pt30.jpg','pt31.jpg','pt32.jpg','pt33.jpg','pt54.jpg'];   
var myurl='';        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=4000;　      //★画像切替時間 1000=1秒 スライド速度。下記のCSS指定のフェード変化時間より長くする
var tran="transition:3s ease-in-out;";//★CSS指定のフェードの変化時間。3sは3秒

//指定ここまで----------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;　　       //次の配列番号
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){ $("Ga1").src=myurl+ga[i]; $("Ga1").style.opacity=1; $("Ga2").style.opacity=0;} //次をセット。フェードイン。フェードアウト
else{ $("Ga2").src=myurl+ga[i]; $("Ga1").style.opacity=0; $("Ga2").style.opacity=1; }  //次をセット。フェードアウト。フェードイン
setTimeout(myChange,spd);    //指定速度周期に画像を更新する
}	
var cs="position:absolute;"+tran+"top:0;left:0;";
var sss='<img src="" id="Ga1" style="'+cs+'"><img src="" id="Ga2" style="'+cs+'">';
$("bs").innerHTML=sss;
myChange();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

フェード１■超簡単な綺麗なフェードのスライドショー 最終修正日 : 2020/05/08

　フェード１■超簡単な綺麗なフェードのスライドショー　　　　最終修正日 : 2020/05/08