attr을 이용해서 특정 태그내 속성의 값을 확인, 변경
- attr을 이용해서 class 속성값 확인
- attr을 이용해서 class 속성값 변경
- attr을 이용해서 src 속성의 값을 변경해서 이미지 교체
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
// attr 을 이용해서, 태그내의 속성의 값을 확인하거나 변경가능
var $visualImg = $("#visual_img");
// attr을 이용해서 class 속성값 확인
alert( $visualImg.attr("class") );
// attr을 이용해서 class 속성값 변경
$visualImg.attr("class", "img02");
// attr을 이용해서 src 속성의 값을 변경해서 이미지 교체
$visualImg.attr("src", "images/main/visual_02.jpg");
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
이벤트: click, mouseover, mouseout
이벤트를 걸어주는 방식 1. 바로 명령기재
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$visualImg = $("#visual_img");
// 이벤트 클릭: click
$visualImg.click(function(){
alert("이미지가 클릭되었습니다.");
});
// 이벤트 마우스 over: mouseover
$visualImg.mouseover(function(){
alert("마우스가 올라갔습니다.");
});
$visualImg.mouseout(function(){
alert("마우스가 벗어났습니다.");
})
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
이벤트를 걸어주는 방식 2. 임의 함수 function만들어서 이벤트에 걸어주기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$visualImg = $("#visual_img");
// 이벤트 클릭: click
// 임의의 함수 onClick을 만들어서 이벤트 발생시 작동하는 함수 지정
// tip! onClick()이렇게 집어넣으면, 안되고, 함수명만 넣어야함!
$visualImg.click( onClick );
});
function onClick(){
alert("이미지를 클릭했습니다.");
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
이벤트를 걸어주는 방식 3. bind, unbind 활용
bind: 이벤트명과 실행명령 걸기
unbind: 이벤트에 걸린 명령 해제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
// 전역변수 선언해주기
// 전역변수화 시켜주기, 어떤함수에서도 사용가능
var $visualImg;
$(document).ready(function(){
$visualImg = $("#visual_img");
// 이벤트 클릭: click
// 임의의 함수 onClick을 만들어서 이벤트 발생시 작동하는 함수 지정
// tip! onClick()이렇게 집어넣으면, 안되고, 함수명만 넣어야함!
//$visualImg.bind("click", onClick );
$("#start_btn").bind("click", onStart );
$("#stop_btn").bind("click", onStop );
});
function onStart(){
alert("지금부터 이벤트가 시작됩니다.");
$visualImg.bind("click", onClick);
}
function onStop(){
alert("지금부터 이벤트가 해제됩니다.");
$visualImg.unbind("click", onClick);
}
function onClick(){
alert("이미지를 클릭했습니다.");
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
setInterval()
일정한 시간간격으로 특정 함수를 반복 실행
형식
setInterval(함수명, 시간간격)
시간간격: 밀리언세컨즈 (1초보다 1000배 작은 단위)
ex) 1000은 1초를 나타냄
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>setInterval()</title>
<style>
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script>
// 전역변수 num 선언
var num;
$(document).ready(function(){
// num에 값대입
num = 0;
// setInterval()통해서, 1초단위로 임의함수 count 실행
setInterval(count,1000);
});
// 임의함수 count 정의
function count(){
document.write(num + "<br>");
num++;
}
</script>
</head>
<body>
</body>
</html>
setInterval 응용
일정시간마다 이미지 교체
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이미지자동변경</title>
<style>
body{
font-size:9pt;
}
div{
margin:20px;
margin-bottom:20px;
}
div div{
font-size:20px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script>
var $visualImg;
var num = 1;
$(document).ready(function(){
$visualImg = $("#img1");
setInterval( onChangeImg ,1000);
});
function onChangeImg(){
if(num < 10){
num++
}else{
num=1;
}
$visualImg.attr("src", "images/img" + num +".jpg");
}
</script>
</head>
<body>
<div>
<div id="panel">
<img id="img1" src="images/img1.jpg" alt="이미지">
</div>
</div>
</body>
</html>
Math.random(), parseInt()
Math.random(): 0부터 1미만의 소수 출력
parseInt(): 버림. 정수만 출력
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>랜덤숫자출력(칼라)</title>
<style>
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script>
var count;
$(document).ready(function(){
setInterval(onCount, 500);
});
function onCount(){
// Math.random(): 0부터 1아래 소수 출력
// parseInt(): 버림. 정수만 출력
count = parseInt(Math.random() * 10 );
document.write(count + "<br>");
}
</script>
</head>
<body>
<div>
<div id="panel">
</div>
</div>
</body>
</html>