• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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>
↓同じくこちらの画像(背景画像)が、ページをリロードするとランダムで切り替わります。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

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

コメントを残す