●2016/01/23：即時関数で囲んで、グローバル変数を消しました。
■フェード８■フェードでサイズ違い実寸表示■と同じく、サイズがバラバラに異なる画像が、綺麗なフェードイン、フェードアウトで、自動で切り替わるスライドショーです。
ただし上記は実寸表示ですが、こちらは表示したいサイズに、スライド画像の縦サイズと横サイズを調整しています。
上記と
同じ画像を使用しているので、違いを確認してみて下さい。
表示サイズよりも大きな画像は縮小され、小さな画像は拡大されます。
さらにサイズの縦横比率が違う画像を全画像表示にしてるので、画像によっては少し縦長表示になったり横長表示になったりします。
このスライドショーでは、極端に画像サイズにバラつきのあるモノは避けて下さい。ボヤケ過ぎたり、扁平になったりします。
基本のJavaScript のソースは
■フェード１■超簡単な綺麗なフェードのスライドショー■です。
違うのは、CSSの指定です。１ヶ所違います。
１．「#Ga1,#Ga2」の指定に「width:100%; height:100%;」の１行を追加します。
ただし、画像の内側に影を付けたい場合はさらに下記を追加して下さい。影を付けなかったり、影が外側の時は下記は不要です。
２．「#Ga1,#Ga2」の指定に「z-index:-1;」を追加。
原本は、
イヌでもわかるJavaScript講座から。
画像（img）の内側に影を指定する方法は
9ineBB から。
■縦横比率は正しく画像のはみ出した上下をカットしたJavaScriptはこちら→ フェード１０■フェードでサイズ違い上下カット