Web ページの背景画像をランダムで表示する Javscript
Web サイトを開くたびに違う背景画像を表示したいということがあるかと思います。そんな時に数行の Javascript を記述することでランダムに切り替わる背景画像を実装することが可能になります。
以下の Javascript ファイルを .js ファイルとして保存し HTML に読み込みます。HTML ファイルは背景画像を適用したい要素に class="random-image" を追加します。
サンプル
function background() {
img = new Array();
img[0] = "img001.png";
img[1] = "img002.png";
img[2] = "img003.png";
n = Math.floor(Math.random()*img.length);
var randomImage = document.getElementsByClassName("random-image");
for ( var i=0; i<img.length; i++ ) {
randomImage[i].style.background = "white url(" + img[n] + ") top -20px right -20vw no-repeat fixed";
}
}
window.addEventListener("load", background, false);img[0] = "img001.png"; の = より右側の “” 内に画像の URL を指定します。相対パスでも良いですが https:// から始まる絶対パスを指定すると画像が表示されないミスを回避しやすくなります。サンプルでは img[2] までの3行になっていますが行を増やしてランダム表示する画像を増やすことも可能です。