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

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/1件

▽最新の回答へ

1 ● 匿名回答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 とかで宜しいのでしょうか?

匿名回答1号さんのコメント
ですね!
関連質問

●質問をもっと探す●



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