●2016/06/10:即時関数で囲んで、グローバル変数を消しました。
背景画像がフェードイン、フェードアウトで、全面でスライドショーをするJavaScriptです。
前に紹介した
■背景スライド2■フェードの全面スライドショー■は、普通の画像を背景画像のように見せかけた「背景画像もどき」でした。
今回は、本物の背景画像です。
ただこの背景画像は、bodyの背景画像ではありません。bodyの背景画像は、スライドしてもフェードはできないのです。
そのためbodyではなく、縦100%横100%指定のdivの背景画像に、スライドとフェードが指定してあります。
今回は高さが100%指定なので、CSSでposition:fixed;の背景固定も入れています。
CSSの指定を変更すれば、背景画像を全面1枚から敷詰め表示に変えることもできます。
■2016/06/10:前回掲載分とJavaScriptのソースを変更しました。こちらの方がフェードが綺麗です。
今回は、「スライドショー」の
■フェード1■超簡単な綺麗なフェードのスライドショー■を背景画像用に改造しました。
■背景画像スライドがランダムで敷き詰め表示にしたJavaScriptはこちら→ 背景スライド10■フェード背景ランダムスライド敷詰
■背景画像の順番表示で全面の文字入りJavaScriptはこちら→ 背景スライド11■フェード背景スライド文字入り
背景画像を画面横幅ピッタリに表示するbackground-sizeプロパティについての説明は、
HTMLクイックリファレンスから。