今回の記事では、JavaScriptで背景画像を動的に切り替える方法について解説します。
実装では、最速最軽量のJavaScriptフレームワーク「Vanilla JS」(素のJavaScript)を使用しております。
結論だけ知りたい方のために、ソースコードだけ先に共有します。
具体的な要件や設計、処理の解説については後半で紹介しておりますので、
仕組みもしっかり理解したいという方は最後まで閲覧いただけますと幸いです。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
ソースコード
画像のURLなどは私のブログで使用しているものになるので、適宜書き換えてください。
<div class="mainVisual">
<div class="mainVisual-inner" id="mainVisualBgArea">
<!-- 背景画像が入る -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>.mainVisual-inner {
height: 350px;
width: 500px;
background-image: url(http://176.34.54.35/wp-content/uploads/2020/02/git.png);
background-size: cover;
background-position: center;
margin: 0 auto;
}const mainVisualBgImages = [
'http://176.34.54.35/wp-content/uploads/2020/02/emile-perron-xrVDYZRGdw4-unsplash-scaled-1.jpg',
'http://176.34.54.35/wp-content/uploads/2020/02/cropped-max-nelson-Se9ufo2dO_g-unsplash-scaled-1.jpg',
'http://176.34.54.35/wp-content/uploads/2020/02/markus-spiske-s7nlaF3kefg-unsplash-scaled-1.jpg',
'http://176.34.54.35/wp-content/uploads/2020/02/git.png'
];
const mainVisualBgArea = document.querySelector('#mainVisualBgArea');
let i = 0;
// 背景画像を切り替える関数
function change_main_vidual_background()
{
if(i === mainVisualBgImages.length) {
i = 0;
};
mainVisualBgArea.style.backgroundImage = 'url(' + mainVisualBgImages[i] + ')';
i++;
}
// インターバルで切り替える
window.setInterval(change_main_vidual_background, 5000);CodePenで動作を確認してみてください。
See the Pen JS 背景画像 切り替え by waibandl321 (@JumCode) on CodePen.
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
解説
コードを共有したところで、処理の解説を行っていきます。
ここでは、実際にクライアントからあった要望をもとに実装設計をしております。
要件
CMSの管理画面で背景画像を1枚しかセットできないので、複数枚で切り替えるようにしてほしい。
処理設計
- 指定の箇所に表示させる背景画像を配列でセット
- 表示エリアの要素を取得
- 背景画像の順番を指定するグローバル変数を用意
- 画像切り替え処理の関数を用意
- setInterval関数で一定時間(5秒)ごとに4.の関数を実行
処理解説(JavaScript)
1 指定の箇所に表示させる背景画像を配列でセット
ここには背景画像で表示させたい画像を配列で格納します。
const mainVisualBgImages = [
'http://176.34.54.35/wp-content/uploads/2020/02/emile-perron-xrVDYZRGdw4-unsplash-scaled-1.jpg',
'http://176.34.54.35/wp-content/uploads/2020/02/cropped-max-nelson-Se9ufo2dO_g-unsplash-scaled-1.jpg',
'http://176.34.54.35/wp-content/uploads/2020/02/markus-spiske-s7nlaF3kefg-unsplash-scaled-1.jpg',
'http://176.34.54.35/wp-content/uploads/2020/02/git.png'
];2 表示エリアの要素を取得
背景画像を表示させる要素を定数に格納します。
この要素に対して、style属性で背景画像を割り当てます。
const mainVisualBgArea = document.querySelector('#mainVisualBgArea');3 背景画像の順番を指定する変数を用意
画像を切り替える関数の中で、この背景画像のナンバーは動的に変化します。
まずはグローバル変数として0を定義しておきます。
let mainVisualBgNumber = 0;4 画像切り替えの関数を用意
ここで行っていることは2つです。
- 最後の画像になったら、画像の表示順を最初に戻す
- 画像URLを格納した配列から順番にURLを取得し、画像の表示エリアにスタイル属性で背景画像を指定する
function change_main_vidual_background()
{
if(mainVisualBgNumber === mainVisualBgImages.length) {
mainVisualBgNumber = 0;
};
mainVisualBgArea.style.backgroundImage = 'url(' + mainVisualBgImages[mainVisualBgNumber] + ')';
mainVisualBgNumber++;
}5 setInterval関数で一定時間(5秒)ごとに4.の関数を実行
window.setInterval(change_main_vidual_background, 5000);これでJavaScriptによる、背景画像の切り替え処理の実装は完了です。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
