●2016/01/23：即時関数で囲んで、グローバル変数を消しました。
■フェード９■フェードでサイズ違い縦横100%■と同じく、サイズがバラバラに異なる画像が、綺麗なフェードイン、フェードアウトで、自動で切り替わるスライドショーです。
上記の場合は、縦横比率を無視して、「#bs」のサイズにスライド画像の縦横を合わせていました。
今回は
縦横比率は正しいです。その代り、
スライド画像のはみ出した上下の両端をカットしています。
■注意：ブラウザFirefoxのみ、「上下の両端カット」ではなく「上端のみ表示（下端はカット）」になります。
それから「#bs」で指定する「height（縦幅）」の数値は、できるだけ上下に余白が出ない数値を設定して下さい。
余白自体は表示されても動作しますが、余白に「#bs」で背景色や背景画像を指定すると、スライド画像が表示されないことがあります（■４■を参照）。
基本のJavaScript のソースは
■フェード１■超簡単な綺麗なフェードのスライドショー■です。
違うのは、CSSの指定です。３ヶ所違います。
１．「#bs」の指定に「overflow:hidden;」を追加します。画像の上下にはみ出した分をカットして、非表示にします。
２．「#Ga1,#Ga2」の指定に「top:0;bottom:0;left:0;right:0;margin:auto;」の１行を追加します。
３．「#Ga1,#Ga2」の指定に「width:100%;」を追加します。
※注意：３の指定は縦長の画像を使用していても、「width:100%;」を使用して、「#bs」のサイズ指定の方を縦長にして下さい。
「width:100%;」は
上下両端をカットしますが、「height:100%;」は左右両端ではなく、
右端だけをカットします。
右端だけだと画像のバランスがおかしくなるので、使用しません。
ただし、画像の内側に影を付けたい場合はさらに下記を追加して下さい。影を付けなかったり、影が外側の時は下記は不要です。
■４■「#Ga1,#Ga2」の指定に「z-index:-1;」を追加。
※注意：４の指定をする時は絶対に「#bs」に背景色や背景色を指定しないこと。
指定すると「#bs」の背景がスライド画像よりも上になってしまい、スライド画像が表示されません。
原本は、
イヌでもわかるJavaScript講座から。
画像を上下左右の中央配置にする方法は
バシャログ。から。
画像（img）の内側に影を指定する方法は
9ineBB から。
■サイズが不揃いなままの実寸表示のJavaScriptはこちら→ フェード８■フェードでサイズ違い実寸表示