ロード時にランダムで画像を複数表示

複数ある画像の中からランダムで複数表示

画像を連番(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が正常に動かない。

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。