ランダムで画像入れ替え時に重複せずに一巡してからループさせたい。
それって可能でしょうか・・・
アドバイス、ご教授よろしくお願いします。
例）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ソースコードが理解できて（重複なしの仕様は一旦諦めて）、
ランダムで画像を入れ替えることに成功したものです。
できれば、ここから一巡するまで重複なしを指定できるコードを追加したいです。
よろしくお願いします。
対象となる画像を全て配列に入れておき、その配列からspliceメソッドでランダムな位置から1つずつ取り出していくのが楽かと思います。
let list = [];
const randomPickup = () => {
if (!list.length) {
list = [...document.querySelectorAll('.grid img')];
}
const pickupImage = list.splice(Math.floor(Math.random() * list.length), 1)[0];
return pickupImage.src;
};
setInterval(() => {
console.log(randomPickup());
}, 1000);
@ishiguro3
Questionerあくまでも参考程度に考えていただければと思います。
ランダムは数が44個分入った配列を作りそれをループさせるのでは実現できないでしょうか？
44個の数字が入った配列の作り方はいろいろあると思いますが、パッと思いつくのだと
あとは
もしかすると要件に合った実装が実現できるプラグインもあると思います。
今後の運用などでそれほど修正が発生しないのであればプラグインにお任せするのも選択の一つかと思います！
@ishiguro3
Questioner