アクセスするたびにランダムで画像を複数表示させたい

2018年11月9日

例えばWebサイトにアクセスするたびに
8枚ある画像の中から4枚をランダムに表示させたい。

という時…

これができる方法をPHP、jQueryでそれぞれ見つけました。

↓アクセスするたびに変わる

PHPで実装する

<?php 
	echo '<ul>';
	$name = array(
		'<img src="./images/random01.jpg" />',
		'<img src="./images/random02.jpg" />',
		'<img src="./images/random03.jpg" />',
		'<img src="./images/random04.jpg" />',
		'<img src="./images/random05.jpg" />',
		'<img src="./images/random06.jpg" />',
		'<img src="./images/random07.jpg" />',
		'<img src="./images/random08.jpg" />'
	);
	$check = array_fill(0,8,0);
	$a = 0;
	while($a < 4){ //表示させたい画像の数
		$i = rand(0,7); //乱数を発生、
		if( $check[$i] != 1 ){
		$check[$i] = 1;
		echo '<li>'. $name[$i] .'</li>';
		$a++;
		}
	}
	echo '</ul>';
 ?>

<?php

echo '<ul>';

$name = array(

'<img src="./images/random01.jpg" />',

'<img src="./images/random02.jpg" />',

'<img src="./images/random03.jpg" />',

'<img src="./images/random04.jpg" />',

'<img src="./images/random05.jpg" />',

'<img src="./images/random06.jpg" />',

'<img src="./images/random07.jpg" />',

'<img src="./images/random08.jpg" />'

);

$check = array_fill(0,8,0);

$a = 0;

while($a < 4){ //表示させたい画像の数

$i = rand(0,7); //乱数を発生、

if( $check[$i] != 1 ){

$check[$i] = 1;

echo '<li>'. $name[$i] .'</li>';

$a++;

}

echo '</ul>';

15行目の「while($a < 4)」で
指定した数だけ<li>タグを書き出しています。
今回は4枚表示させたいので 4 と指定しています。

16行目の「rand(0,7)」の部分ですが、
要素（すべての画像の枚数）が今回は 8枚なので（0,7）となります。
※プログラム言語では「0」から数えます。

表示画像が重複しない
指定数分のタグしか書き出さないのでhtmlソースがシンプルになる

jQueryで実装する

HTML

<ul randomPh="4">
	<li><img src="./images/random01.jpg" /></li>
	<li><img src="./images/random02.jpg" /></li>
	<li><img src="./images/random03.jpg" /></li>
	<li><img src="./images/random04.jpg" /></li>
	<li><img src="./images/random05.jpg" /></li>
	<li><img src="./images/random06.jpg" /></li>
	<li><img src="./images/random07.jpg" /></li>
	<li><img src="./images/random08.jpg" /></li>
</ul>

</ul>

jQuery

$(function() {
	$.fn.extend({
		randomPh : function(num) {
			return this.each(function() {
				var chn = $(this).children().hide().length;
				for(var i = 0; i < num && i < chn; i++) {
					var r = parseInt(Math.random() * (chn - i)) + i;
				$(this).children().eq(r).show().prependTo($(this));
				}
			});
		}
	});

	$("[randomPh]").each(function() {
		$(this).randomPh($(this).attr("randomPh"));
	});

});

$(function() {

$.fn.extend({

randomPh : function(num) {

return this.each(function() {

var chn = $(this).children().hide().length;

for(var i = 0; i < num && i < chn; i++) {

var r = parseInt(Math.random() * (chn - i)) + i;

$(this).children().eq(r).show().prependTo($(this));

}

});

}

});

$("[randomPh]").each(function() {

$(this).randomPh($(this).attr("randomPh"));

});

今回はHTMLで
まず8枚分の画像すべてを読み込んでから
jQueryで4枚を非表示にしています。

ランダム表示したい要素（この場合は「<li>タグ」）を並べて、
その親の要素（この場合は「<ul>タグ」）に新しい属性 randomPh を追加し、
表示したい数を指定します。

表示画像が重複しない
8枚分すべてのタグを読み込んでいる

「作例の写真を4枚載せたいのだけれど、沢山あって選べない(^▽^;)」という時は
サイトに動きが出て良いと思います。

========================

▼参考にさせていただきました。ありがとうございます。

●PHP
https://on-ze.com/archives/460

●jQuery
https://on-ze.com/archives/451

この記事の投稿者

iziz

Webデザイナー&HTMLコーダーときどきイラストレーター。

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31