jQuery:画像や要素をランダム出力する方法の備忘録

  • Posted on
  • Category : Tips
jQuery:画像や要素をランダム出力する方法の備忘録

jQueryを使って画像や要素などをランダムに並べ替えたり表示させたりする方法の備忘録です。jQueryと言っても乱数を作るのに必要なわけではないですし、特に前半の方などは簡易的なもので尚更JavaScriptだけでできるじゃんって感じがしますが、やっぱり何かと楽に実装できるので使っているだけです…。

※動きを確認できるデモなどは用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか、CodePenJSFiddleなどを利用して確認してください。

jQuery:画像や要素をランダム出力する方法の備忘録 目次

  1. 画像をランダム表示する
  2. 画像をランダム表示し、altなども変更する
  3. 大幅に記述を変える
  4. 背景画像をランダム表示する
  5. ランダムな数字付きのクラスを付加する
  6. ランダムなカラーコードを生成する (HEX or RGB)
  7. ランダムに要素を並べ替える
  8. ランダムに要素をフェードインさせる #1
  9. ランダムに要素をフェードインさせる #2

1. 画像をランダム表示する

img要素のsrcを書き換えることで画像をランダム表示させる方法です。
HTMLとjQueryはそれぞれ以下のように記述し、スクリプトの記述にあるvar imagesのところでランダムで表示させたい画像のパスを記述します。
あとは、.attr()を使ってランダムで選ばれたものを指定した要素のsrcを書き換えるよう記述してあげれば、ページを表示する度にランダムで選ばれた画像が表示されるようになります。

HTML

<img class="random" src="img01.jpg" alt="画像" />

jQuery

var images = [
	'img01.jpg',
	'img02.jpg',
	'img03.jpg'
];
var randImg = images[Math.floor(Math.random() * images.length)];
$('.random').attr('src', randImg);

目次へ

2. 画像をランダム表示し、altなども変更する

上で画像をランダム表示させる方法をあげましたが、多くの場合は画像だけでなくaltも書き換える必要があると思います。
そのような場合は以下のように記述することで、ランダム表示する際にsrcaltの両方を切り替えることができます。

HTML

<img class="random" src="img01.jpg" alt="画像" />

jQuery

var images = [
	['img01.jpg', 'これは1枚目の画像'],
	['img02.jpg', 'これは2枚目の画像'],
	['img03.jpg', 'これは3枚目の画像']
];
var randImg = images[Math.floor(Math.random() * images.length)];
$('.random').attr({'src':randImg[0], 'alt':randImg[1]});

ここではaltを書き換える方法で紹介しましたが、同じようにすれば例えばtitleなどの内容を変更することもでき、その場合はvar imagesのところに['img01.jpg', 'これは1枚目の画像', 'これは1枚目のタイトル']という感じでtitleに表示させたいものを記述し、あとは.attr()で呼び出す際にrandImg[2]と記述すればtitleの内容も変更されているのを確認できます。

目次へ

3. 大幅に記述を変える

上でランダムで画像を切り替える際にsrcだけでなくaltも同時に変更する方法をあげましたが、こちらは手っ取り早く内容を大きく変えたい時に使える方法で、例えばリンク先やイメージが異なるバナーや内容が全然違うコンテンツをランダム表示させたい時などに使えると思います。
HTMLとjQueryはそれぞれ以下のように記述し、サンプルではリンク先・画像のsrc・画像のalt・画像のクラス名が変わるものになっています。

HTML

<div class="random"><a href="#"><img class="img01" src="img01.jpg" alt="これは1枚目の画像" /></a></div>

jQuery

var elements = [
	'<a href="#"><img class="img01" src="img01.jpg" alt="これは1枚目の画像" /></a>',
	'<a href="#"><img class="img02" src="img02.jpg" alt="これは2枚目の画像" /></a>',
	'<a href="#"><img class="img03" src="img03.jpg" alt="これは3枚目の画像" /></a>'
];
var randElm = elements[Math.floor(Math.random() * elements.length)];
$('.random').html(randElm);

上2つはそれぞれ指定した箇所を.attr()で変更するというものでしたが、こちらは.html()を使って変更するというものになります。
今回のサンプルでは全て同じようなものを出すようにしていますが、var elementsの内容を変更すれば、例えばリンク指定がない画像を出したりそもそも画像ではなく全く別物の要素を出したりすることもできます。

目次へ

4. 背景画像をランダム表示する

画像のランダム表示の記述を少し変えてあげれば、背景画像をランダム表示させるということもできます。
まず、以下のように背景画像を表示させたい要素をHTMLに記述し、CSSではwidthheightbackground-repeatbackground-positionの指定を予め記述しておきます。

※サンプルではJavaScript無効時に何も表示されなくなるのを避けるためにbackground-imageも予め記述しています。

HTML

<div class="random"></div>

CSS

.random {
	width: 400px;
	height: 400px;
	background: url(img01.jpg) no-repeat 0 0;
}

あとはjQueryで以下のようにランダムで表示させたい背景画像をvar bgImagesに記述しておき、表示したい要素に.css()background-imageを指定することで背景画像をランダム表示させることができます。

jQuery

var bgImages = [
	'img01.jpg',
	'img02.jpg',
	'img03.jpg'
];
var randBg = bgImages[Math.floor(Math.random() * bgImages.length)];
$('.random').css('background-image', 'url(' + randBg + ')');

目次へ

5. ランダムな数字付きのクラスを付加する

全く異なるクラス名をランダム付加したい場合は「1. 画像をランダム表示する」のように配列を使う方法が良いですが、例えばclass1class2class3… のように数字の部分のみ違う感じのクラスを使う場合は、以下のように記述することでランダムな数字付きのクラスを付加することができます。

HTML

<p>「class1」なら赤、「class2」なら青、「class3」なら黄色に文字カラーが変更される</p>

CSS

.class1 { color: red; }
.class2 { color: blue; }
.class3 { color: yellow; }

jQuery

var num = 3,
randNum = Math.floor(Math.random() * (num)) + 1;
$('p').addClass('class' + randNum);

まずvar numで数値の最大の数を指定し、今回のサンプルではclass1class2class3と3種類のクラスがあるので「3」を指定しておきます。
次に2行目でランダムの数字をつくるのですが、単純にrandNum = Math.floor(Math.random() * (num));とだけ記述した場合は1~3でなく0~2までの数字しか出力されないので、Math.floor(Math.random() * (num)) + 1;とランダムで出力された数値に1を足してやります。
あとは、この数値を用いて.addClass()してやればランダムな数字付きのクラスを付加することができます。

ここでは文字カラーの変更を例にしましたが、これを使うことで例えばCSSで実装したアニメーションをランダムでつけたり、先ほど紹介した背景画像をランダムで変更するのをHTMLに記述するのではなくクラスで切り替える形にすることもできますね。

目次へ

6. ランダムなカラーコードを生成する (HEX or RGB)

HEX値とRGB値の値をランダムで生成する方法で、どちらもこの方法に限らず様々な方法がありますが今回はそれぞれひとつずつ紹介します。
サンプルではどちらもランダムなカラーコードを生成し、それを用いて要素の文字カラーを変更するという内容になっています。

HEX

HEX値のランダムなカラーコードを生成する方法です。
以下のように記述することで、要素の文字カラーをランダムで選ばれたHEXカラーにすることができます。

jQuery

var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
var hexColor = '#';
for(i=0; i < 6; i++) {
	hexColor = hexColor + arr[Math.floor(Math.random() * 16)];
}
$('element').css('color', hexColor);

RGB

RGB値のランダムなカラーコードを生成する方法で、スマートさとかは全くないですが単純に以下のような記述で生成できます。

jQuery

var rgbColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
$('element').css('color', rgbColor);

目次へ

7. ランダムに要素を並べ替える

要素をランダムで並び替えて表示させる方法で、ここではサンプルのHTMLとして以下のように1~10の数字がそれぞれ記述されたulliを利用します。

HTML

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

単純にランダムに並び替えて表示する

以下のように記述することでランダムにli要素をランダムに並び替えて表示させることができます。

jQuery

var arr = [];
$('ul li').each(function() {
	arr.push($(this).html());
});
arr.sort(function() {
	return Math.random() - Math.random();
});
$('ul').empty();
for(i=0; i < arr.length; i++) {
	$('ul').append('<li>' + arr[i] + '</li>');
}

ランダムに並び替えて、指定した数だけ表示する

上で紹介したものはそのままサンプルのHTMLで使用した場合に10個のli要素がランダムに並び替えられて表示されますが、例えばランダムに並び替え 且つ 10個のうち5個だけ表示したいという時はfor(i=0; i < arr.length; i++)arr.length;の部分を変更してfor(i=0; i < 5; i++)のようにしてやれば実装することができます。
特に大きな変更でも難しい変更でもないですし、表示数を変更する度にこの部分を変更すればいい話なのですが、これをできればJSは変更せずにできるようにしたいという場合は、以下のようにdata属性を利用してHTML側で表示数を調整するといった方法もあります。

まず、HTMLのulに赤字のようなdata属性を記述します。
ここで指定した数がli要素が表示される数となり、今回は5個表示させたいのでdata-show="5"と記述します。

HTML

<ul data-show="5">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	    ・
	    ・
	    ・
	<li>10</li>
</ul>

あとは、先ほど紹介した内容とほとんど一緒ですが、JSを以下のように記述すればデフォルトで10個表示されていたli要素がランダムに並び替えられ、且つdata属性を利用して指定した数だけ表示されるようになります。

jQuery

var arr = [];
var showNum = $('ul').data('show');
$('ul li').each(function() {
	arr.push($(this).html());
});
arr.sort(function() {
	return Math.random() - Math.random();
});
$('ul').empty();
for(i=0; i < showNum; i++) {
	$('ul').append('<li>' + arr[i] + '</li>');
}

目次へ

8. ランダムに要素をフェードインさせる #1

先ほどは要素をランダムに並び替えてパッと表示させていましたが、こちらはフェードインで表示されるものです。
今回はサンプルとしてそれぞれ以下のようなHTMLとCSSを使用します。

HTML

<ul>
	<li><span>1</span></li>
	<li><span>2</span></li>
	<li><span>3</span></li>
	<li><span>4</span></li>
	<li><span>5</span></li>
	<li><span>6</span></li>
	<li><span>7</span></li>
	<li><span>8</span></li>
	<li><span>9</span></li>
</ul>​

CSS

ul {
	width: 340px;
	overflow: hidden;
	list-style: none;
}
ul li {
	float: left;
	width: 100px;
	height: 100px;
	margin: 20px 0 0 20px;
	padding: 0;
}
ul li:nth-of-type(3n+1) {
	margin-left: 0;
}
ul li span {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 0;
	background-color: #3498db;
	color: #fff;
	text-align: center;
	line-height: 100px;
}

jQueryは以下のように記述し、それぞれ赤文字の数字部分を変えれば表示スピードを調整することができます。
また、フェード表示完了後に何か処理を行いたいという時は、同じく赤文字で表示しているreturn false;の部分を変更すれば実装できます。

jQuery

var element = $('ul li span');
element.css({'opacity': '0'});

$(window).on('load', function() {
	randomShow();
	function randomShow() {
		var elmLength = element.length,
		randSet = Math.floor(Math.random() * elmLength);
		$(element[randSet]).animate({'opacity': '1'}, 300);
		element.splice(randSet, 1);
		if ( elmLength > 0 ) {
			setTimeout(function() {randomShow();}, 150);
		} else {
			return false;
		}
	}
});

目次へ

9. ランダムに要素をフェードインさせる #2

先ほど紹介したもので要素をランダムにフェードインさせることができましたが、動きとしては今回のサンプルの場合ではli要素の並びはそのままで、その中にあるspan要素をランダムにフェードインさせていました。
これを「7. ランダムに要素を並べ替える」で紹介したものを組み合わせることで、lispan要素の両方をランダムに並び替え 且つ フェードインさせる動きを実装することができます。

HTMLとCSSは「8. ランダムに要素をフェードインさせる #1」と同じものを使用し、jQueryは以下のように記述をします。
スピードの調整や表示完了後の処理などに関しては、先ほどと同様赤文字で表示している箇所を変更してください。

jQuery

var arr = [];
$('ul li').each(function() {
	arr.push($(this).html());
});
arr.sort(function() {
	return Math.random() - Math.random();
});
$('ul').empty();
for(i=0; i < arr.length; i++) {
	$('ul').append('<li>' + arr[i] + '</li>');
}

var element = $('ul li span');
element.css({'opacity': '0'});

$(window).on('load', function() {
	randomShow();
	function randomShow() {
		var elmLength = element.length,
		randSet = Math.floor(Math.random() * elmLength);
		$(element[randSet]).animate({'opacity': '1'}, 300);
		element.splice(randSet, 1);
		if ( elmLength > 0 ) {
			setTimeout(function() {randomShow();}, 150);
		} else {
			return false;
		}
	}
});

ランダムに要素をフェードインさせる方法を2つ紹介しましたが、いずれも「BlackFlag」さんで紹介されているものほぼ利用させてもらっており、「BlackFlag」さんのエントリーではより実装方法や動きについて丁寧に説明されているので、もう少し詳しく知りたい方はこちらをご覧ください。

目次へ

Back to Top

jQuery:画像や要素をランダム出力する方法の備忘録

jQuery:画像や要素をランダム出力する方法の備忘録

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。