JavaScriptでヘッダー画像を切り替えるコードを紹介

今回はCSSのbackground-imageで画像を切り替えるコードを紹介していきます。

ヘッダー画像を切り替えるコード

let img_index = 0;
let header_img = document.getElementById('exampleImgContent');
let header_imgs_array = [
    'img/example.jpg',
    'img/example2.jpg',
];

function header_imgs_change() {
    header_img.style.backgroundImage = "url(" + header_imgs_array[img_index] + ")";
    img_index++;

    if (img_index === header_imgs_array.length) {
        img_index = 0;
    }
}

setInterval(header_imgs_change, 5000);

・簡単なプログラムの流れ

• header_imgs_arrayで配列に表示したい画像を入れる
• setIntervalによって5秒に1回header_imgs_change()関数が実行
• img_indexが配列の上限にきたらimg_indexを0にして最初の画像へ戻る

注意としてChrome、Safari、Edgeではふわっとが可能。Firefoxではふわっとなし。

ヘッダー画像を切り替えるコードの解説

1. 変数を設定する

let img_index = 0;
let header_img = document.getElementById('exampleImgContent');
let header_imgs_array = [
    'img/example.jpg',
    'img/example2.jpg',
];

• 1行目…配列用をカウントするためにindexを作成
• 2行目…画像を表示したい要素のIDを指定
• 3~6行目…配列の中に表示したい画像をHTMLファイルからのフォルダパスを指定

2. メイン処理をしていく

function header_imgs_change() {
    header_img.style.backgroundImage = "url(" + header_imgs_array[img_index] + ")";
    img_index++;

    if (img_index === header_imgs_array.length) {
        img_index = 0;
    }
}

• 2~3行目…表示したい場所の画像を配列順に差し替え、img_indexを1プラスする
• 5~7行目…img_indexと元々の配列の長さと比較。数値が一致したらimg_indexを0に初期化

3. 何秒後にメイン処理をするか設定する

setInterval(header_imgs_change, 5000);

最後にsetInterval関数で何秒後にheader_imgs_change()を実行するか決める。1秒後=1000。今回は5秒後なので5000。

今回はここまで。

・レスポンシブヘッダーを作りませんか？
「レスポンシブ」ヘッダーを作る Part1【HTML編】
「レスポンシブ」ヘッダーを作る Part2【CSS編】
「レスポンシブ」ヘッダーを作る Part3【JavaScript編】