[JS]jQueryで画像をランダムに出力する方法

Javascript・jQuery

2012.08.26

jQueryを利用してページのアクセス毎に複数枚の画像の中からランダムで1枚の画像を表示させる方法です。

今回は<img>タグの画像を使う場合と、CSSのbackground-imageに背景画像を指定する場合の2種類の方法を紹介させていただきます。

jQuery で<img>タグの画像をランダム表示
1. Javascript の記述
2. HTMLの記述例
CSSのbackground-imageで指定した背景画像をランダム表示
1. Javascript の記述
2. HTMLの記述例

jQuery で<img>タグの画像をランダム表示

今回は全部で5 枚の画像ファイルの中から、アクセスするたびに1枚の画像をランダムで表示させてみます。

Javascript の記述

jqueryファイルと一緒に<head>内に以下のように記述します。

<script src="./jquery.min.js"></script>
<script>
$(function() {
    var array = [
    "images/images01.jpg",
    "images/images02.jpg",
    "images/images03.jpg",
    "images/images04.jpg",
    "images/images05.jpg"
    ];
 
    var l = array.length;
    var r = Math.floor(Math.random()*l);
    var imgurl = array[r];
    $("img#randomimg").attr({"src":imgurl});
});
</script>

$(function() {

var array = [

"images/images01.jpg",

"images/images02.jpg",

"images/images03.jpg",

"images/images04.jpg",

"images/images05.jpg"

];

var l = array.length;

var r = Math.floor(Math.random()*l);

var imgurl = array[r];

$("img#randomimg").attr({"src":imgurl});

});

</script>

<img>タグにID（#randomimg）を指定します。

HTMLの記述例

画像を表示させたい場所に、以下のように記述します。

<img id="randomimg">

1	<img id="randomimg">

↓こちらの画像が、ページをリロードする毎にランダムで切り替わります。

CSSのbackground-imageで指定した背景画像をランダム表示

やり方は先の<img>タグの例とほぼ同じです。

Javascript の記述

jqueryファイルと一緒に<head>内に以下のように記述します。

<script src="./jquery.min.js"></script>
<script>
$(function() {
    var array = [
    "images/images01.jpg",
    "images/images02.jpg",
    "images/images03.jpg",
    "images/images04.jpg",
    "images/images05.jpg"
    ];
 
    var l = array.length;
    var r = Math.floor(Math.random()*l);
    var bgimgurl = array[r];
    $("div#randomimg2").css('background-image',('url("'+bgimgurl+'")'));
});
</script>

$(function() {

var array = [

"images/images01.jpg",

"images/images02.jpg",

"images/images03.jpg",

"images/images04.jpg",

"images/images05.jpg"

];

var l = array.length;

var r = Math.floor(Math.random()*l);

var bgimgurl = array[r];

$("div#randomimg2").css('background-image',('url("'+bgimgurl+'")'));

});

</script>

15行目の記述を背景画像を表示させる要素（div#randomimg2）に変更して、background-imageのプロパティを追加します。

HTMLの記述例

<div>タグにID（#randomimg2）を指定します。

CSSで背景画像を表示させる要素に「幅」と「高さ」などを指定しておきます。

<style>
#randomimg2 {
    width:300px;
    height:225px;
    background-repeat:no-repeat
}
</style>

<div id="randomimg2"></div>

<style>

#randomimg2 {

width:300px;

height:225px;

background-repeat:no-repeat

}

</style>

↓同じくこちらの画像（背景画像）が、ページをリロードするとランダムで切り替わります。

きむらより:

2015.5.20 16:15

はじめまして。
アクセスするたびに画像を切り替えるjavascriptは無いかと
探していたらこちらのページにたどり着きました。
さっそく試させて頂いたら、見事成功しました。(^.^)
非常に助かりました。ありがとうございます。

返信