program1

140813_[jquery] setInterval

2014.09.23 21:25 read.167

setInterval(함수, 시간);

특정한 시간마다 실행

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

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

ex) setInterval(test, 1000);

setTimeout(함수, 시간);

특정한 시간마다 실행

clearsetTimeout(종료할 타이머);

타이머 종료

예제1

<!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

<!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

<!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>

추가메뉴 목록

엮인글 0

http://cat.hubweb.net/board_s1pr1/2347/46c/trackback

41	이클립스 jQuery 플러그인	2014.10.27
40	140813_[jquery] 이벤트	2014.09.23
39	140813_[jquery] 마우스 이벤트	2014.09.23
38	140813_[jquery] hover	2014.09.23
37	140813_[jquery] mouseover	2014.09.23
>	140813_[jquery] setInterval	2014.09.23
35	140812_[jquery] show(slide)	2014.09.23
34	140811_[jquery] animate	2014.09.23
33	140811_[jquery] 왼쪽 slide menu	2014.09.23
32	140808_[jquery] slideUp/slideDown	2014.09.23
31	140808_[jquery] hide/show	2014.09.23
30	140808_[jquery] fadeout	2014.09.23
29	140808_[jquery] val	2014.09.22
28	140807_[jquery] html	2014.09.22
27	140807_[jquery] text,attr	2014.09.22
26	140806_[jquery] text	2014.09.22
25	140806 -[jquery] attr	2014.09.22
24	140805 -[jquery] css,selector	2014.09.18
23	jqury 소스 링크	2014.08.26
22	140725_1	2014.07.25

1 2 3 >

엮인글 0

LOGIN