ロード時にランダムで画像を複数表示
複数ある画像の中からランダムで複数表示
画像を連番（01～）で用意。
jQuery
$(function () {
var i = 0;
var rand_number = '01';
var arr = [];
// 3枚分
while (i < 3) {
// 1～5からランダムに抽出
rand_number = ('0' + Math.ceil(Math.random()*5)).slice(-2);
// 配列に追加
arr.push(rand_number);
// 重複を除く
arr = $.unique(arr);
i = arr.length;
}
var img1_full = $('#img1 img').attr('src').replace(/[0-9]{2}/, arr[0]);
var img2_full = $('#img2 img').attr('src').replace(/[0-9]{2}/, arr[1]);
var img3_full = $('#img3 img').attr('src').replace(/[0-9]{2}/, arr[2]);
$('#img1').html($('#img1 img').attr('src', img1_full));
$('#img2').html($('#img2 img').attr('src', img2_full));
$('#img3').html($('#img3 img').attr('src', img3_full));
});
HTML
<div>
<span id="img1"><img src="/img/full01.jpg"></span>
<span id="img2"><img src="/img/full02.jpg"></span>
<span id="img3"><img src="/img/full03.jpg"></span>
</div>
jQuery1.11.0だと$.uniqueが正常に動かない。
サンプル
