問題
背景画像をランダムに表示させるには？
解決策
背景画像を連番にし、Javascriptで「Math.floor(Math.random() * 背景画像の数);」を使用してbackground-imageを設定する。
ランダムに表示する仕様の構築
デザイン、仕様によっては背景画像を複数用意し、ページの読み込みの度にランダムで選定して背景画像に設定する場面があるのではないでしょうか。
今回は背景画像をランダムに表示させる方法をご紹介します。
DEMOはこちら
テキスト
読み込みを行う度に、下の4つの画像がランダムで背景画像として表示されます。
HTMLの構築
背景画像を表示するためのブロックを用意します。
- ※便宜上、クラス「randombg」を設定しています。
<div class="randombg">
<p class="w_text">テキスト</p>
</div>CSSの構築
クラス「randombg」に対し、CSSを設定します。
主に背景画像に関する設定を行います。
.randombg{
width: 240px;
height: 140px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.randombg .w_text{
display: inline-block;
padding: 5px 10px;
background-color: rgba(255,255,255,0.7);
}ランダムに表示する仕様の構築
最後にJavascript（jQuery）の設定を行います。
if($('.randombg').length){
var imgpass = "画像ファイルまでのパス";
// 表示させたい画像のファイル名＋拡張子を配列に格納
var imgfile = [];
imgfile[0] = 'bg01.jpg';
imgfile[1] = 'bg02.jpg';
imgfile[2] = 'bg03.jpg';
imgfile[3] = 'bg04.jpg';
// 画像の数を元に、ランダムな数値を算出
var n = Math.floor(Math.random() * imgfile.length);
var bgbox = $('.randombg');
// 算出したランダムな数値の順番にいるファイル情報をbackground-imageに設定する
bgbox.css('background-image', 'url(' + imgpass + imgfile[n] + ')');
}- 画像までのパス情報を変数に格納します。
- 表示させたい画像のファイル名＋拡張子を配列に格納します。
- Math.floor()とMath.random()を使い、配列の数-1の範囲内でのランダムな数値を算出します。
- 算出したランダムな数値の順番にいるファイル情報をbackground-imageに設定します。
ポイント!
Math.floor()とMath.random()がとても重要な役割を果たしています。
| Math.random() | 0~1のランダムな数値を得ることができます。 |
|---|---|
| Math.floor() | 小数点以下を切り捨てて、整数に変えてくれます。 |
- Math.random()（0~1のランダムな数値） × imgfile.length（画像の数 = 4）により、0以上4未満のランダムな数値が得られます。
- 得られた0以上4未満のランダムな数値を、Math.floor()を介して小数点以下を切り捨てることで、0、1、2、3のいずれかの数値が得られます。
- 配列は0から設定しているため、imgfile[0、1、2、3]のいずれかの値を指定することが可能となります。
参考
【CSSで背景画像をランダムに表示させたいのですが -CSSで背景画像をラン- HTML・CSS | 教えて!goo】
https://oshiete.goo.ne.jp/qa/4805263.html
【Math.random() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random
【Math.floor() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor
コメント