フェード８■フェードでサイズ違い実寸表示

●2016/01/23：即時関数で囲んで、グローバル変数を消しました。
サイズがバラバラに異なる画像が、綺麗なフェードイン、フェードアウトで、自動で切り替わるスライドショーです。
JavaScript のソースは■フェード１■超簡単な綺麗なフェードのスライドショー■と全く同じです。
違うのは、CSSの指定です。３ヶ所違います。
１．「#bs」の横幅と縦幅の指定を、スライド用の画像の最大横幅、最大縦幅よりも、少し大きく指定します。
２．「#bs」に余白部分の背景色か背景画像を指定。指定しないとbodyと同じ背景になります。
３．「#Ga1,#Ga2」の指定に「top:0;bottom:0;left:0;right:0;margin:auto;」の１行を追加します。
これだけで、サイズ違いのスライドショーができます。枠線や影等の装飾はお好みで。

原本は、イヌでもわかるJavaScript講座から。
画像を上下左右の中央配置にする方法はバシャログ。から。

■コメント付きでサイズが不揃いなままの実寸表示のJavaScriptはこちら→　フェード８-１■フェードでサイズ違い実寸表示コメ付き
■コメ、リンク付きでサイズが不揃いなままの実寸表示のJavaScriptはこちら→　フェード８-２■フェードでサイズ違い実寸表示コメ、リンク付き

■縦横比率を無視して、表示サイズに画像の縦横を合わせたJavaScriptはこちら→　フェード９■フェードでサイズ違い縦横100%
■縦横比率は正しく画像のはみ出した上下をカットしたJavaScriptはこちら→　フェード１０■フェードでサイズ違い上下カット

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>フェード８■フェードでサイズ違い実寸表示</title>

<!--★コピーここから-->
<style>
body{background:#db9;}/*★背景色薄茶色*/

/*★必須。スライド画像の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bs{
position:relative;/*★必須。基準位置の指定*/
margin:50px auto;/*★水平中央位置指定(上下、左右)*/
width:600px;/*★横幅指定。スライド画像の最大横幅よりも大きく*/
height:400px;/*★縦幅指定。スライド画像の最大縦幅よりも大きく*/
border:solid 2px #fff;/*★枠線指定。白色*/
box-shadow:inset 10px 10px 20px #000;/*★内側の影指定。黒色*/
background:#953;/*★スライド画像のサイズが違うので、余白の背景色に濃茶色指定。背景画像を指定しても可。指定しないとbodyと同じ背景になります*/
}
/*★必須。フェードスライド用の指定*/
#Ga1,#Ga2{
position:absolute;/*★#bsを位置の基準にするためと画像２枚を同位置にするため*/
transition:2s ease-in-out;/*★フェード変化時間。1sは１秒*/
top:0;bottom:0;left:0;right:0;margin:auto;/*★画像サイズが違うので画像の上下左右中央位置指定。好みでズラしても可能*/
}
</style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから。下の１行がスライドショー位置指定。id="bs"は必須-->
<div id="bs"></div>

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードのスライドショー。サイズ違い実寸表示追加。　　★2016/01/23　グローバル変数を削除
By　http://cya.sakura.ne.jp/java/sshow2.htm　(イヌでもわかるJavaScript講座)
==============================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=['sf9.jpg','gat108.jpg','sf6.jpg','pt43.jpg','gy3.jpg','pt55.jpg','Mona.jpg'];   
var myurl='';        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=5000;　      //★画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする

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 sss='<img src="" id="Ga1"><img src="" id="Ga2">';
document.getElementById('bs').innerHTML=sss;
myChange();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

フェード８■フェードでサイズ違い実寸表示 最終修正日 : 2016/01/23

　フェード８■フェードでサイズ違い実寸表示　　　　最終修正日 : 2016/01/23