CSSで画面全体に背景画像を1枚おいています。（background-size:cover;）
やりたいことは、このbackground-imageとして設定している画像をフェード切り替えで複数枚の画像変更を行いたい。
ただし、1枚目に表示される画像は時間ごとに変えたい（朝〜昼〜夜）のですがやり方がわからずアドバイスを頂きたいです。
1枚目は時間で変更img：a01.jpg（朝）a02.jpg（昼）a03.jpg（夜）
2名目以降は共通img：b.jpg、c.jpgとか。
上記を例にすると3枚の背景画像をフェードで切り替えたい。
でも1枚目の画像だけは時間に応じて変えたいという内容です。
JSだけで出来るならJS、PHPも使うのであれば、すみませんあまり得意ではないのでぜひやり方教えてください。
よろしくお願いします。
No.1
http://jsfiddle.net/dwm1mzjp/
↑こんな感じであとは setInterval とかで回せばいいと思います。
4
2
2
回答有難うございます。
2015/09/10 11:30:03この方法、使えそうです。ただ、画像の枚数分divが増えてしまうので、できればHTMLには1つのdivだけが希望なのです。。。
自分のイメージとしては、変数に午前用、午後用を作って、↑の内容を使って時間別に切り替える？
とかできればよいのかなとぼんやりとしたイメージがあるのですが、形にできるスキルがありません。。。。
よいアイデアありましたら引き続きお願い致します。
「フェード切り替え」を実現するには2枚の画像を重ねることが必要になりますので、どうしても要素が最低二つは必要になるかと思います。
2015/09/12 14:25:40これを1枚で済ませるにはかなりトリッキーな方法が必要になるかと思いますし、具体的には思いつきません。