人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryとPHPで時間ごとに背景画像を変えたい。

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も使うのであれば、すみませんあまり得意ではないのでぜひやり方教えてください。

よろしくお願いします。

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答1号

http://jsfiddle.net/dwm1mzjp/
↑こんな感じであとは setInterval とかで回せばいいと思います。


匿名質問者さんのコメント
回答有難うございます。 この方法、使えそうです。ただ、画像の枚数分divが増えてしまうので、できればHTMLには1つのdivだけが希望なのです。。。 自分のイメージとしては、変数に午前用、午後用を作って、↑の内容を使って時間別に切り替える? とかできればよいのかなとぼんやりとしたイメージがあるのですが、形にできるスキルがありません。。。。 よいアイデアありましたら引き続きお願い致します。

匿名回答1号さんのコメント
「フェード切り替え」を実現するには2枚の画像を重ねることが必要になりますので、どうしても要素が最低二つは必要になるかと思います。 これを1枚で済ませるにはかなりトリッキーな方法が必要になるかと思いますし、具体的には思いつきません。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ