匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

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人5回まで
  • 13歳以上
  • 登録:2015/09/09 09:12:16
  • 終了:2015/09/16 09:15:03

回答(1件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2015/09/09 16:18:11

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

匿名質問者

回答有難うございます。
この方法、使えそうです。ただ、画像の枚数分divが増えてしまうので、できればHTMLには1つのdivだけが希望なのです。。。

自分のイメージとしては、変数に午前用、午後用を作って、↑の内容を使って時間別に切り替える?
とかできればよいのかなとぼんやりとしたイメージがあるのですが、形にできるスキルがありません。。。。

よいアイデアありましたら引き続きお願い致します。

2015/09/10 11:30:03
匿名回答1号

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

2015/09/12 14:25:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません