메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140813_[jquery] setInterval

2014.09.23 21:25 read.122

setInterval(함수, 시간);

특정한 시간마다 실행

clearInterval(종료할 타이머); 타이머 종료

clearInterval(쓰레드의 주소); 타이머 종료

ex) setInterval(test, 1000);


setTimeout(함수, 시간);

특정한 시간마다 실행

clearsetTimeout(종료할 타이머);

타이머 종료


예제1

jq_setInterval_1.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0;}
			div{width:100%;height:50px;background:pink;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				setInterval(test, 1000);
				var current=0;
				function test(){
					if(current==0){
						$("div").css("background-color","red");
					}else if(current==1){
						$("div").css("background-color","green");
					}else{
						$("div").css("background-color","blue");
					}
					current++;
					if(current==3){
						cyrrebt=0;
					}
				}
			});
		//]]>
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

배열로 하는 방법

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0;}
			div{width:100%;height:50px;background:pink;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				var colorArray=new Array("red","green","blue");
				setInterval(test, 2000);
				
				n=0;
				function test(){
					//alert("aa");
					$("div").css("background-color", colorArray[n]);
					n++;
					if(n==colorArray.length){
						n=0;
					}
				}
			});
		//]]>
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>


예제2

jq_setInterval_2.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				var current=0;
				setInterval(test,2000);
				function test(){
					$("img").fadeOut(1000,function(){
						if(current==0){
							$("img").attr("src","images/img_02.jpg");
							current=1;
						}else{
							$("img").attr("src","images/img_01.jpg")
							current=0;
						}
						$("img").fadeIn(1000);
					});
				}
			});
		//]]>
		</script>
	</head>
	<body>
		<div><img src="images/img_01.jpg" alt="" /></div>
	</body>
</html>

배열로하는 방법

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				var imgArray=new Array("images/img_01.jpg","images/img_02.jpg","images/img_03.jpg")
				var n=1;
				setInterval(test,1000);
				
				function test(){
					$("img").fadeOut(1000,function(){
						$("img").attr("src",imgArray[n]);
						n++;
						if(n==imgArray.length){
							n=0;
						}
						$("img").fadeIn(1000);
					});
				}
			});
		//]]>
		</script>
	</head>
	<body>
		<div><img src="images/img_01.jpg" alt="" /></div>
	</body>
</html>


예제3

jq_mouseover_2.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0;}
			div{position: absolute;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				//var count=0;
				var imgArr=new Array("images/img_01.jpg","images/img_02.jpg","images/img_03.jpg");
				var n=0;//보여지는 그림 인덱스
				var m=1;//준비하는 그림 인데스
				
				$(".a img").attr("src",imgArr[n]); //보여지는 것
				$(".b img").attr("src",imgArr[m]); //준비하는 것
				$('.b').hide();
				
				var controller=setInterval(test,2000);

				function test(){
					$('.a').hide("slide",{direction:"left"},500);
					$('.b').show("slide",{direction:"right"},500,function(){
						$('.a').show();
						$('.b').hide();
						n++;
						m++;
						if(n==imgArr.length){
							n=0;
						}
						if(m==imgArr.length){
							m=0;
						}
						$('.a img').attr("src",imgArr[n]); 
						$('.b img').attr("src",imgArr[m]);
					});
				}
			
				$('div').mouseover(function(){
					clearInterval(controller);
				});
				$('div').mouseleave(function(){
					clearInterval(controller);
					controller=setInterval(test,2000);
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div class="a"><img src="" alt="" /></div>
		<div class="b"><img src="" alt="" /></div>
	</body>
</html>





추가메뉴 목록
위로