[ 자바스크립트 ] 랜덤으로 이미지 바꾸기

[ 자바스크립트 ] 여러 이미지들 중에서 랜덤으로 가져오기

urlArray 이라는 배열에다가, 이미지들의 주소를 넣어놓고서, 그 배열을 이용하는 방식이다.

1. 배열에 있는 순서대로 가져오기
2. 배열에서 랜덤으로 가져오기

---

1. 배열에 있는 순서대로 가져오기

네이버 웹툰 / 황미나 / 보톡스

예고편

 
<img id="my_image" alt="예고편" 
src="http://thumb.comic.naver.net/webtoon/63129/1/inst_thumbnail_20090331182235.jpg" /> <br />

<a id="page_link" target="_blank" 
href="http://comic.naver.com/webtoon/detail.nhn?titleId=63129&no=1&weekday=tue"> 예고편 </a> <br />


<script type="text/javascript">

var imgTag = document.getElementById( "my_image" ); 
var aTag = document.getElementById( "page_link" ); 


var urlArray = [ "http://thumb.comic.naver.net/webtoon/63129/1/inst_thumbnail_20090331182235.jpg", 
			 "http://thumb.comic.naver.net/webtoon/63129/2/inst_thumbnail_20090413164943.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/3/inst_thumbnail_20090420164340.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/4/inst_thumbnail_20090427152845.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/5/inst_thumbnail_20090504181825.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/6/inst_thumbnail_20090511181528.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/7/inst_thumbnail_20090518174419.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/8/inst_thumbnail_20090525175403.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/9/inst_thumbnail_20090601165320.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/10/inst_thumbnail_20090608173106.jpg" , 
			 "http://thumb.comic.naver.net/webtoon/63129/11/inst_thumbnail_20090615180615.jpg" 
		    ]; 

var textArray = [ "예고편", "1화" , "2화" , "3화" , "4화" , "5화" , "6화" , "7화" , "8화" , "9화" , "10화" ]; 


var number = -1; 

var timeOut; 
var callFunction = numerical_order ();


function numerical_order () { 

	 number++; 

	 if ( number == urlArray.length ) number = 0; 

	 var newSrc = urlArray [ number ]; 
	 var newText = textArray [ number ]; 

	 imgTag.src = newSrc; 
	 imgTag.alt = newText; 


	 var newHref = "http://comic.naver.com/webtoon/detail.nhn?titleId=63129&"; 
	      newHref += "no=" + ( number + 1 ); 
	      newHref += "&weekday=tue"; 

	 aTag.text = newText; 
	 aTag.href = newHref; 


	 timeOut = setTimeout ( numerical_order , 1300 ); 
} 

</script>
 

---

2. 배열에서 랜덤으로 가져오기

네이버 웹툰 / 황미나 / 보톡스

예고편

 
<img id="my_image" alt="예고편" 
src="http://thumb.comic.naver.net/webtoon/63129/1/inst_thumbnail_20090331182235.jpg" /> <br />

<a id="page_link" target="_blank" 
href="http://comic.naver.com/webtoon/detail.nhn?titleId=63129&no=1&weekday=tue"> 예고편 </a> <br />


<script type="text/javascript">

var imgTag = document.getElementById( "my_image" ); 
var aTag = document.getElementById( "page_link" ); 


var parentUrl = "http://thumb.comic.naver.net/webtoon/63129/"; 

var urlArray = [ "1/inst_thumbnail_20090331182235.jpg", 
			 "2/inst_thumbnail_20090413164943.jpg" , 
			 "3/inst_thumbnail_20090420164340.jpg" , 
			 "4/inst_thumbnail_20090427152845.jpg" , 
			 "5/inst_thumbnail_20090504181825.jpg" , 
			 "6/inst_thumbnail_20090511181528.jpg" , 
			 "7/inst_thumbnail_20090518174419.jpg" , 
			 "8/inst_thumbnail_20090525175403.jpg" , 
			 "9/inst_thumbnail_20090601165320.jpg" , 
			 "10/inst_thumbnail_20090608173106.jpg" , 
			 "11/inst_thumbnail_20090615180615.jpg" 
		    ]; 

var textArray = [ "예고편", "1화" , "2화" , "3화" , "4화" , "5화" , "6화" , "7화" , "8화" , "9화" , "10화" ]; 


var callFunction = random_image ();
var atIntervals = setInterval ( random_image , 1300 ); 


function random_image () { 

	 var random = Math.random() * urlArray.length; 
	 var number = Math.floor( random ); 


	 var newSrc = parentUrl + urlArray [ number ]; 

	 var newText = textArray [ number ]; 

	 imgTag.src = newSrc; 
	 imgTag.alt = newText; 


	 var newHref = "http://comic.naver.com/webtoon/detail.nhn?titleId=63129&no="; 
	      newHref += number + 1; 
	      newHref += "&weekday=tue"; 

	 aTag.text = newText; 
	 aTag.href = newHref; 
} 

</script>
 

---

이 블로그에서 함께 볼만한 글 ☞ [ 자바스크립트 ] 랜덤으로 색상 및 글자 크기 바꾸기

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*