만두야닷컴


<html>
<head>
<script>
	//배열에 이미지 주소 넣기
	var img_arr=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
	var tmp=0;	 //현재 출력되는 이미지  
	var tot=img_arr.length-1;	 // 전체 배열의 갯수
	var timer	//setInterval을 담을 변수
	var direction=1;	//방향 1이면 정방향 -1이면 역방향
	
	function roll(val){
		if(!val){
			val=direction;
		}else{
			direction=val;
		}	
		
		tmp=tmp+val;
		
		//tmp 가 0보다 작으면 tmp 에는 마지막 배열
		//tmp 가 마지막 배열 숫자보다 크면 0
		if(tmp<0){
			tmp=tot;
		}else if(tmp>tot){
			tmp=0;
		}

		//target에 img_arr에 tmp 값 넣기
		document.getElementById("target").src="img/"+img_arr[tmp];
	}

	//timer멈춤
	function stopRoll(){
		window.clearInterval(timer);
	}

	//페이지 접속시 배열0의 이미지를 target에 넣는다
	//페이지 접속시 startRoll()을 실행
	window.onload=function(){
		document.getElementById("target").src="img/"+img_arr[0];
		startRoll();
	}
	
	//3초 마다 한번씩 roll()함수 실행
	function startRoll(){	
		timer=window.setInterval("roll()",3000);
	}
</script>
</head>
<body>
<div id="wrap">
	<div id="contents" >
		<img src="img/arrow_1.jpg" style="cursor:pointer" onclick="roll(-1)">	
		<img id="target" onmouseover="stopRoll()" onmouseout="startRoll()" style="cursor:pointer">
		<img src="img/arrow_2.jpg"  style="cursor:pointer" onclick="roll(1)">
	</div>
</div>
</body>
</html>

확인:http://azit4u.phps.kr/script/roll.php

'자바스크립트' 카테고리의 다른 글

자바스크립트로 각자리 숫자 합계 구하기  (0) 2014.01.24
글자수 체크 하기  (0) 2011.10.05
javascript 메뉴  (0) 2011.10.05
javascript 롤링  (0) 2011.07.27

Comment +0