[JS]jQuery で画像をランダムに出力する方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

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

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

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>

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

HTML の記述例

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

<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>

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>

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

スポンサード

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