匿名質問者

background-imageを時間で変えたい。フェードインアニメ付き。


現在bgswitcherというプラグインを使って背景の切り替えを行っています。
そこで1枚目の画像を時間によって変えたいのですが、可能でしょうか。
$("#hogehoge").bgswitcher({
images: ["images/bg1.jpg", "images/bg_movie.jpg", "images/bg1.jpg"]

午前中は
images: ["images/bg1.jpg", "images/bg2.jpg", "images/bg3.jpg"]

午後は
images: ["images/bg4.jpg", "images/bg5.jpg", "images/bg6.jpg"]

のような。。。

bgswitcherにこだわりは全くありません。自作でもPHPでも
背景前画面に設定した画像をフェード切り返したい。時間によって切り替えたい。
が出来る方法を探しています。

良い方法ありましたら教えてほしいです。。

1番理想は
・1枚目画像でる〜キャッチコピーpngが1秒後に〜
・2枚目画像出る〜キャッチコピーpngが1秒後に〜
・3枚目画像出る〜キャッチコピーpngが1秒後に〜

をやりたいのですが、うまくいかずbgswitcherで画像だけに妥協してしまいました。
もし、良いコードがありましたら理想形の方を教えてくれると非常に嬉しいです
よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2015/10/06 01:40:03

回答1件)

匿名回答1号 No.1

 こんな感じでいいのでは?

if ( new Date().getHours() < 12 ){
  $("#hogehoge").bgswitcher({
  images: ["images/bg1.jpg", "images/bg2.jpg", "images/bg3.jpg"]
  //...
}else{
  $("#hogehoge").bgswitcher({
  images: ["images/bg4.jpg", "images/bg5.jpg", "images/bg6.jpg"]
  //...
}
匿名質問者

なるほど。言われてみればごもっともな感じです。
まだ勉強始めたばかりで、応用が効きませんでした。ありがとうございます。
あとで試してみようと思うのですが、例えば6時間毎に切り替えるのであれば

getHours()<6
else if
getHours()<12
else if
getHours()<18

とかで宜しいのでしょうか?

2015/09/29 18:38:09
匿名回答1号

ですね!

2015/09/29 20:09:11

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

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

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

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

回答リクエストを送信したユーザーはいません