테스트 사이트 - 개발 중인 베타 버전입니다

랜덤이미지 다중으로 보여주기는 채택완료

김선만 11년 전 조회 6,364
아래코드는 여러 이미지에서 하나만 랜덤으로 보여주는 코드인 것 같은데요
여러 이미지에서 랜덤으로 5개 또는 원하는 갯수를 보여주고자 합니다.
아래코드로 수정가능할런지요. 아님 다른것도 좋구요 좀 부탁드릴게요
아무리 검색해도 찾지 못해서요...죄송...;;

<script type = "text/javascript">
var quotes = new Array()
quotes[0] ='<img src="img/bn01.gif" width="120" height="60" border="0">'
quotes[1] ='<img src="img/bn02.gif" width="120" height="60" border="0">'
quotes[2] ='<img src="img/bn03.gif" width="120" height="60" border="0">'
quotes[3] ='<img src="img/bn04.gif" width="120" height="60" border="0">'
quotes[4] ='<img src="img/bn05.gif" width="120" height="60" border="0">'
quotes[5] ='<img src="img/bn06.gif" width="120" height="60" border="0">'

var whichquote = Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
11년 전
배열정렬은 아래 두가지 방법 중 두번째 것이 코드는 길어도 효율적입니다 
랜덤하게 만드는 실행 횟수가  엄청난 차이가 있습니다

 quotes.sort(function(){
   aa=Math.random() - Math.random();
   //document.write(aa); //<--테스트용 실행 횟수를 볼 수 있음
   return aa
    });
 document.write(quotes)

 ---------------------------------------2번째 방법
gg=3; // 가져올 배열 갯수
var i=quotes.length;
h=0; newArr=new Array()
while(--i){ 
var k = Math.floor(Math.random()*(i+1));
var tmpArr=quotes[k]; 
quotes[k]=quotes[i]; quotes[i]=tmpArr;

//document.write(i+'/'+k+'/'+quotes[i], '<br>'); //<--테스트용 실행 횟수를 볼 수 있음

  newArr[h]=tmpArr; h++
  if(h==gg) break;
}
document.write(quotes,'<br>'); //전체배열
document.write(newArr); //원하는 갯수배열
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

11년 전
답변해주셔서 대단히 감사합니다. ^^

말러83님 링크는 어케 거는지요
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

말러83
11년 전
굳이 javascript로 할 필요가 없다면 아래와 같은 코드를 써보세요.
</div><?php

<div>// 이미지 주소를 배열로 일단 다 넣습니다.

<div>$images = array('<a href="http://example.com/image/01.jpg'," target="_blank" rel="noopener noreferrer">http://example.com/image/01.jpg',</a></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>'<span style="font-size: 10pt; line-height: 1.5"><a href="http://example.com/image/02.jpg'," target="_blank" rel="noopener noreferrer">http://example.com/image/02.jpg',</a></span></div>
<div><span style="font-size: 10pt; line-height: 1.5"><span class="Apple-tab-span" style="white-space: pre">	</span>'</span><span style="font-size: 10pt; line-height: 1.5"><a href="http://example.com/image/03.jpg'," target="_blank" rel="noopener noreferrer">http://example.com/image/03.jpg',</a></span></div>
<div><span style="font-size: 10pt; line-height: 1.5"><span class="Apple-tab-span" style="white-space: pre">	</span>'</span><span style="font-size: 10pt; line-height: 1.5"><a href="http://example.com/image/04.jpg'," target="_blank" rel="noopener noreferrer">http://example.com/image/04.jpg',</a></span></div>
<div><span style="font-size: 10pt; line-height: 1.5"><span class="Apple-tab-span" style="white-space: pre">	</span>'</span><span style="font-size: 10pt; line-height: 1.5"><a href="http://example.com/image/05.jpg'," target="_blank" rel="noopener noreferrer">http://example.com/image/05.jpg',</a></span></div>
<div><span style="font-size: 10pt; line-height: 1.5"><span class="Apple-tab-span" style="white-space: pre">	</span>'</span><span style="font-size: 10pt; line-height: 1.5"><a href="http://example.com/image/06.jpg'," target="_blank" rel="noopener noreferrer">http://example.com/image/06.jpg',</a></span></div>
<div><span style="font-size: 10pt; line-height: 1.5"><span class="Apple-tab-span" style="white-space: pre">	</span>'</span><span style="font-size: 10pt; line-height: 1.5"><a href="http://example.com/image/07.jpg'," target="_blank" rel="noopener noreferrer">http://example.com/image/07.jpg',</a></span></div>
<div><span style="font-size: 10pt; line-height: 1.5"><span class="Apple-tab-span" style="white-space: pre">	</span>'</span><span style="font-size: 10pt; line-height: 1.5"><a href="http://example.com/image/08.jpg');" target="_blank" rel="noopener noreferrer">http://example.com/image/08.jpg');</a></span></div>
<div><span style="font-size: 10pt; line-height: 1.5">
</span></div>
<div><span style="font-size: 10pt; line-height: 1.5">// 흔들흔들흔들어</span></div>
<div><span style="font-size: 10pt; line-height: 1.5">shuffle($images);</span></div>
<div><span style="font-size: 10pt; line-height: 1.5">
</span></div>
<div><span style="font-size: 10pt; line-height: 1.5">// 섞인 배열의 첫 5개만 출력</span></div>
<div>for($i=0; $i<5; $i++) {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>echo '<img src="'.$images[$i].'" />
';</div>
<div>}</div>
<div>?></div>
<div>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인