jQueryで画像を書き換える

皆さまごきげんよう。
ようやく春めいてきた今日この頃というのに、既に花粉と戦う日々を送っております(><);皆さんは大丈夫ですか?
さて、実は何気に当サイトのトップ画像(=ヘッダーの画像)が、1日のうちに4回入れ替わっているんですよ。びっくりですよね∑(゚Д゚)
一体何の意味があるのか?というツッコミは置いといて、今回はjQueryを使って背景画像を時間で切り替えてみる、ということをやってみます。

jQueryで画像を書き換えてみる

まずは下記の様なhtmlファイルを作り、簡単なコードを書いてみてちゃんと動くかどうかテストしてみます。
このhtmlファイルと同じ階層に、背景画像を入れるimgフォルダを作り、元々の画像1枚と書き換え用の画像4枚の画像を入れておきます。

今回は、ワードプレスに元々設定してある背景画像をjqueryで書き換える、という設定の簡易版なので、ワードプレス同様にbodyタグの中にimgタグを置いてsrcで元の画像を指定してあります。
なので、scriptをコメントアウトすれば元々の画像が表示されるようになっていますよ。


 <!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>js-if時間で背景画像変化</title>
  </head>

  <body>
   <img src="img/lamp.jpg">
   </img>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
     $(function(){
       var now = new Date().getSeconds();//現在の秒を取得する
       if(0 <= now && now <= 14){//今が0秒〜14秒の時
        $('img[src="img/lamp.jpg"]').attr('src','img/sea.jpg');
      }else if(15 <= now && now <= 29){//今が15秒〜29秒の時
        $('img[src="img/lamp.jpg"]').attr('src','img/sky.jpg');
      }else if(30 <= now && now <= 44){//今が30秒〜44秒の時
        $('img[src="img/lamp.jpg"]').attr('src','img/chur.jpg');
      }else{//今が45秒〜59秒の時
        $('img[src="img/lamp.jpg"]').attr('src','img/dusk.jpg');
      }
     });

    </script>
  </body>
 </html>

時間を取得してif文で条件分岐

時間を取得するには、前回javascriptでカウントダウンタイマーを作るでもやった基本中の基本、new Date()で今日の日付一式のデータを取得、でしたね。
その後に続けて、今回はgetSeconds()を使って現在の秒を取得します。切り替えの確認がしやすいように、短時間のサイクルにしてみました。

次にif文で、15秒ごとに書き換える画像のsrcを指定します。

jQueryのattr()メソッドでsrcを書き換えて画像を変更する

今回使ったのはattr()メソッドです。
attr()メソッドは、jQueryでhtml属性の取得や設定をするといった操作が出来ます。
例えば今回の例でいうと、


 $('img[src="img/lamp.jpg"]').attr('src','img/sea.jpg');

imgの属性srcを、.attrの後の()内の内容に書き換えているので画像が切り替わります。

出来上がり

サンプルはこちら
15秒ごとに画像が切り替わるので、何度かリロードして確認してみて下さいね!

簡単なサンプルですが、画像に限らずコンテンツを条件分岐で変更したい時に色々応用出来そうですね。
時間を取得して条件分岐を使えば、時間帯や季節によってページに載せる画像や文言を変えるとか、夜間は目に優しい暗めの背景色に切り替える。なんて使い方も出来そうです。

では次回はこれを元にして、ワードプレスの背景画像をjQueryを使って時間で切り替えてみますよ。お楽しみに(^^)ゞ

コメントを残す