[jQuery] 접속 할 때마다 다른/랜덤 이미지 노출하기

#jQuery #접속시랜덤이미지표시 #중복없음

 

HTML

<div class="conbox random-imgbox">
 <img src="./img/img01.png" alt="" class="random-img">
 <img src="./img/img02.png" alt="" class="random-img">
 <img src="./img/img03.png" alt="" class="random-img">
</div>

 

jQuery

$(document).ready(function() {
 var imgs = $('.random-imgbox img'); 
 var lastIndex = localStorage.getItem('lastImgIndex');
 var randomIndex;
 do {
   randomIndex = Math.floor(Math.random() * imgs.length);
}
 while (randomIndex == lastIndex);
 imgs.hide().eq(randomIndex).show();
 localStorage.setItem('lastImgIndex', randomIndex);
});

 

 

중복 이미지도 허용하고 싶은 경우

$(document).ready(function() {
 var imgs = $('.clone-imgbox img');
 var randomIndex = Math.floor(Math.random() * imgs.length);
 imgs.hide().eq(randomIndex).show();
});