●2016/04/04:即時関数で囲んで、グローバル変数を消しました。
画面全部を使用するスライドショーで、見た目は背景画像のスライドショーのフル・スクリーン版です。
実は、このスライド自体は「スライドショー」で紹介した
■簡単1■自動スライド 超簡単■と同じJavaScriptで、背景画像ではなく、普通の画像のスライドショーです。
上記との違いは、JavaScriptのソースの中で位置指定と横幅指定をしていること。→ top:0; left:0; width:100%;
そしてJavaScriptのソースの中で、好みで固定位置指定(position:fixed;)か絶対位置指定(position:absolute;)かを選択できること。
見本は固定の「fixed」です。スクロールしても画像位置が固定したままです。
「absolute」を選択すると、スクロールに連動して画像も移動します。
そして、透過指定を付けたので画像を薄くできます。
ただしこれはフェードイン、フェードアウトではなく、画像全体の表示が薄くなるだけです。
フェードでスライドする全面スライドは、
■背景スライド2■フェードの全面スライドショー■から。
最後に、重ね方の指定ができます。
背景画像のように上に文章が書けるように、普通の画像にCSSのz-indexのマイナス指定を付けます。
通常は見本のように、JavaScriptの中で「var Zx=-1;」と「マイナス1」指定をすればいいです。
しかし他の設定で、すでに「マイナス1」を使用している場合は、それよりもマイナスの数値を大きくして下さい。
マイナス数値が大きいほど、重なり方が下になります。
つまり、ほんとうは背景画像ではないのですが、背景画像のような扱いが可能というわけです。
*ただし、どんなにマイナス数値を大きくしても、一番下に表示されるのはbodyの背景です*
使用する時は、画像の重さは軽いもので、枚数も少なめ、切替時間はゆっくりが無難です。
ブラウザが対応していれば、本物の背景画像を全面スライドすることもできます。
その場合はこちらの
■背景スライド3■背景サイズ指定スライド■で、どうぞ。