2022.1.10 更新
皆さまごきげんよう。
今回は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を使って時間で切り替えてみますよ。お楽しみに(^^)ゞ
“時間経過で自動的に背景画像が変わる！jQueryを使った背景画像の切り替え方” への1件の返信