ランダムで画像が入れ替わるグリッドレイアウト（一巡するまで重複なし）
解決したいこと
ランダムで画像入れ替え時に重複せずに一巡してからループさせたい。
それって可能でしょうか・・・
アドバイス、ご教授よろしくお願いします。
該当するソースコード
例）HTML
<ul class="grid">
<li><img src="./images/mv/mv1.jpg"></li>
<li><img src="./images/mv/mv2.jpg"></li>
<li><img src="./images/mv/mv3.jpg"></li>
<li><img src="./images/mv/mv4.jpg"></li>
<li><img src="./images/mv/mv5.jpg"></li>
<!-- 省略 -->
<li><img src="./images/mv/mv41.jpg"></li>
<li><img src="./images/mv/mv42.jpg"></li>
<li><img src="./images/mv/mv43.jpg"></li>
<li><img src="./images/mv/mv44.jpg"></li>
</ul>
js
$().ready ( function() {
// とりあえず1秒間隔で繰り返す
window.setInterval ( function() {
// 表示されている画像の枚数44
var rndIndex = Math.floor(Math.random()*44);
// imgarea内のimgのrandIndex番目の画像に対して1秒で透明になるように設定し、
// 透明になったあとに(rndImage).jpgの画像を300ミリ秒で不透明になるように設定
$('.mv_wrap img:eq('+rndIndex+')').fadeTo(1000,0,function() {
// 用意してある画像の枚数44
var rndImage = Math.floor(Math.random()*44);
$(this)
.attr('src','./images/mv/mv'+rndImage+'.jpg')
.attr('class','brightness')
.fadeTo(500,1);
});
}, 400);
setInterval(function(){
$('.mv_wrap img').removeClass('brightness');
},25000);
});
自分で試したこと
いろいろ記事は探して試してみました。
唯一、上記のjsソースコードが理解できて（重複なしの仕様は一旦諦めて）、
ランダムで画像を入れ替えることに成功したものです。
できれば、ここから一巡するまで重複なしを指定できるコードを追加したいです。
よろしくお願いします。
0
