背景スライド2■フェードの全面スライドショー      UP日時 : 2016/04/04

●2016/04/04:即時関数で囲んで、グローバル変数を消しました。
画面全部を使用するスライドショーで、見た目は背景画像のフェードのスライドショーのフル・スクリーン版です。
■前回掲載分は別のJavaScript使用で、前回分は削除しました。
今回のこのスライド自体は「スライドショー」で紹介した■フェード1■超簡単な綺麗なフェードのスライドショー■と同じJavaScriptで、背景画像ではなく、普通の画像のスライドショーです。

上記との違いは、JavaScriptのソースの中で位置指定と横幅指定をしていること。→ top:0; left:0; width:100%;
そしてJavaScriptのソースの中で、好みで固定位置指定(position:fixed;)か絶対位置指定(position:absolute;)かを選択できること。
見本は固定の「fixed」です。スクロールしても画像位置が固定したままです。
「absolute」を選択すると、スクロールに連動して画像も移動します。

最後に、重ね方の指定ができます。
背景画像のように上に文章が書けるように、普通の画像にCSSのz-indexのマイナス指定を付けます。
通常は見本のように、JavaScriptの中で「var Zx=-1;」と「マイナス1」指定をすればいいです。
しかし他の設定で、すでに「マイナス1」を使用している場合は、それよりもマイナスの数値を大きくして下さい。
マイナス数値が大きいほど、重なり方が下になります。
つまり、ほんとうは背景画像ではないのですが、背景画像のような扱いが可能というわけです。
*ただし、どんなにマイナス数値を大きくしても、一番下に表示されるのはbodyの背景です*
使用する時は、画像の重さは軽いもので、枚数も少なめ、切替時間はゆっくりが無難です。

■背景画像を全面1枚表示にしたJavaScriptはこちら→ 背景スライド10■フェード背景スライド全面