강서딸바보's TECH

jquery, javascript_스터디6( 위치 활용: 이미지 x, y축으로 움직이기, 스크롤값이용 이미지 올리기)

2018. 2. 28. 22:42

이미지 x축으로만 화면에서 움직이기

<!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>ballMoving1</title>
    <style>
        body{
            font-size:9pt;      
        }       
        
        #panel{
            width:600px;
            height:300px;
            border:1px solid #999;
            position:relative;
        }
        
        #bar{
            position:absolute;
            left:50px;
            top:190px;
            width:500px;
            height:20px;
            z-index:10;
            
            border-top:solid 1px #999;
        }
        
        #img1{
    position: absolute;
    left: 50px;
    top: 60px;
    width: 128px;
    height: 76px;
        }
        
        #nav{
            text-align:center;
            width:600px;
        }
        
    </style>
    <script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    
    <script>
    
       var $img;  //  움직일 이미지
       //  추가 tip: position이 relative 인 panel 아래에 absolute이기때문에 이러한 움직임 가능
      
       var $line;  //  이미지가 갖게 될 위치
       var start_x;  //  시작점(고정)
       var current_x;  //  매시간별 위치
       var end_x;  //  멈춤점(고정)
       var step = 20;   //  점진적 이동거리
      
       var myInterval;  //  interval을 담을 변수
      
       var isPlay = true;  //  시작, 멈춤 버튼 연속클리방지위한 기준변수
      
       $(document).ready(function(){
            
            $img = $("#img1");
            $line = $("#bar");
            
            
            start_x = $line.position().left;
            current_x = start_x;
            end_x = start_x + $line.outerWidth() - $img.innerWidth();
            
            
            $("#btn_start").bind("click", onStart);
            $("#btn_stop").bind("click", onStop);
        
       });
     
     
      function onStart(){
        
        if(isPlay == true){
            myInterval = setInterval( moving, 200);
            isPlay = false;
        }
        
      }
     
      function onStop(){
        
        clearInterval(myInterval);
        isPlay = true;
        
      }
     
      function moving(){    
        
        current_x = current_x + step;
        $img.css("left", current_x);
        
        if(current_x >= end_x || current_x <= start_x ){
            
            step = step * -1;
        }
        
        
        
      }
    </script>
</head>
<body>
    <div> 
    
        <div id="panel">
            <div id="bar"> </div>
            <div id="img1">
                <img src="images/ball.jpg">
            </div>
        </div>
        <div id="nav">
            <button id="btn_start">시작</button>
            <button id="btn_stop">멈춤</button>
        </div>
    </div>
</body>
</html>

이미지 x축, y축으로 화면에서 움직이기(테두리 안에서만 튕기면서 움직이기)

<!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>ballMoving2</title>
    <style>
        body{
            font-size:9pt;  
        }
            
        #panel{
            width:600px;
            height:400px;
            border:1px solid #999;
            position:relative;
        }
        
        #img1{
    position: absolute;
    left: 244px;
    top: 92px;
    width: 128px;
    height: 128px;
        }
        
        #nav{
            text-align:center;
            width:600px;
        }
        
    </style>
    
    <script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    <script>        
        
        //  객체
        var $panel;
        var $img1;
        
        //  고정값
        var start_x;
        var end_x;
        var start_y;
        var end_y;
        
        //  변화값
        var current_x;
        var current_y;
        
        //  속도(고정)
        var step_x = 10;
        var step_y = 10;
        
        //  이벤트 방지 기준
        var isPlay = true;
        
        //  interval 담을 변수
        var xInterval;
        var yInterval;
 
        
        $(document).ready(function(){
            
            
            //  아래 변수들 선언
            $panel = $("#panel");
            $img1 = $("#img1");
            
            //  공의 최초 위치
            start_x = $img1.position().left; 
            start_y = $img1.position().top;
            
            //  테두리의 위치
            end_x = $panel.innerWidth() - $img1.outerWidth(); 
            end_y = $panel.innerHeight() - $img1.outerHeight();
            
            //  현재위치 최초 선언
            current_x = start_x;
            current_y = start_y;
            
            $("#btn_start").bind("click", onStart);
            $("#btn_stop").bind("click", onStop);
            
        });
    
        function onStart(){
            
            if(isPlay == true){
                
                xInterval = setInterval( xMoving, 100);
                yInterval = setInterval( yMoving, 100);
                
                isPlay = false;
            }
            
        }
        
        function onStop(){
            
            clearInterval(xInterval);
            clearInterval(yInterval);
            
            isPlay = true;  
        }
        
        function xMoving(){
            
            current_x = current_x + step_x;
                        
            $img1.css("left", current_x);
            
            if(current_x >= end_x || current_x <= 0){
                
                step_x *= -1;
            }
            
            
        }
        
        function yMoving(){
            
            current_y = current_y + step_y;
            
            $img1.css("top", current_y);
            
            if(current_y >= end_y || current_y <= 0){
                
                step_y *= -1;
            }
        }
        
    
    
    </script>
   
</head>
<body>  
    <div> 
        
        <div id="panel">    
            <div id="img1">
                <img src="images/ball.jpg">
            </div>
        </div>
        <div id="nav">
            <button id="btn_start">시작</button>
            <button id="btn_stop">멈춤</button>
        </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>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>스크롤이미지</title>
    <style>
        body{
            font-size:9pt;      
        }       
        #panel{
            width:600px;
            height:400px;
            border:1px solid #999;
            position:relative;
        }
        
        
        #image_Wrap{
            left:200px;
            top:80px;
            width:220px;
            height:220px;           
            border:1px solid #999;
            position:absolute;
            overflow:hidden;
        }
        
        #image_view img{
            display:block;
        }
        
        #nav{
            text-align:right;
            width:600px;
        }
    </style>
    <script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    
    
    <script>
        
        //  보이는 화면의 크기보다 이미지가 클경우 사이즈를 줄이는 방법
        
        var $imgWrap;  //  그림이 보이는 크기
        var imgNum;  //  보여질 사진의 수
        
        //  시작, 끝(고정)
        var startY = 0;
        var endY;
        
        //  내려가는 크기(고정)
        var stepY = 2;
        
        //  현재의 위치(변화)
        var currentY = 0;
        
        //  interval 담을 그릇
        var myInterval;
        
        var isPlay = true;
        
        $(document).ready(function(){
            
            $imgWrap = $("#image_Wrap");
            imgNum = $imgWrap.children().size();
            
            //  전제: 이미지의 높이가 전부 동일한 사이즈, 부모의 css에서 overflow가 되어있음.(그렇기에 스크롤가능)
            //  이미지의 개수 10개중 scroll되어 다시 올라갈 높이는 최초 1개는 작동이 안됨.
            //  이미지의 총 개수에서 1개의 이미지 개수를 뺀 것
            endY = $imgWrap.innerHeight() * imgNum * 9;
            
            $("#btn_start").bind("click", onStart);
            
            $("#btn_stop").bind("click", onStop);
            
        });
        
        function onStart(){
            //alert('1');
            if(isPlay == true){
                //alert('2');
                myInterval = setInterval( onMoving ,20);
                isPlay = false;
            }
        }
        
        function onStop(){
            //alert('3');
            clearInterval(myInterval);
            isPlay = true;
        }
        
        function onMoving(){
            
            currentY = currentY + stepY;
            //alert('4');
            //  부모를 스크롤해준다.
            $imgWrap.scrollTop(currentY);
            
            if(currentY >= endY  ||  currentY <= 0){
                //alert('5');
                stepY *= -1;
            }
        }
    </script>
   
</head>
<body>
    
<div> 
    
    <div id="panel">
        <div id="image_Wrap">   
            <img src="images/img1.jpg">
            <img src="images/img2.jpg">
            <img src="images/img3.jpg">
            <img src="images/img4.jpg">
            <img src="images/img5.jpg">
            <img src="images/img6.jpg">
            <img src="images/img7.jpg">
            <img src="images/img8.jpg">
            <img src="images/img9.jpg">
            <img src="images/img10.jpg">
        </div>
    </div>
    <div id="nav">
        <button id="btn_start">시작</button>
        <button id="btn_stop">멈춤</button>
    </div>
</div>
      
</body>
</html>

저작자표시 비영리 변경금지

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

jquery, javascript_스터디9( 이미지 갤러리-index(), 슬라이드 이미지 갤러리 ) (0)	2018.03.12
jquery, javascript_스터디8( animate, 이미지 슬라이더 직접코딩, 이미지 갤러리 직접코딩, a 링크 누르면 이동 금지 ) (0)	2018.03.07
jquery, javascript_스터디7( 애니메이션-show, hide, toggle, slideDown, slideUp, slideToggle, 애니메이션 중복막기, stop, fadeIn, fadeOut, fadeToggle, fadeTo ) (0)	2018.03.05
jquery, javascript_스터디5( setInterval 활용한 랜덤숫자 css, clearInterval, 상태변수, 화면위치좌표:position, outerHeight, outerWidth, scrollTop, scrollLeft, top, left ) (0)	2018.02.26
jquery, javascript_스터디4( attr, click, mouseover, mouseout, 임의함수이벤트걸기, bind, unbind, setInterval, Math.random, parseInt ) (0)	2018.02.21
jquery, javascript_스터디3(요소찾기: 태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기 ) (0)	2018.02.19

jquery, javascript_스터디5( setInterval 활용한 랜덤숫자 css, clearInterval, 상태변수, 화면위치좌표:position, outerHeight, outerWidth, scrollTop, scrollLeft, top, left )

2018. 2. 26. 22:29

setInterval 활용한 랜덤숫자 css

$span.css("color", "#"+(parseInt(Math.random()*0xffffff)).toString(16) );

위 표현이 재미있다.

color를 랜덤함수를 통해서 임의로 부여할 수 있음

window.scrollTo(0, document.body.scrollHeight);

또한, 위표현도 재미있다.

window화면이 0부터 scroll되었을때의 마지막화면으로 이동시켜줌.

<!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 num;
        var $panel;
        var $span;
        
        $(document).ready(function(){
            
            $panel = $("#panel");
            
            setInterval( onCount, 10);
            
        });
        
        //  onCount라는 함수 랜덤의 숫자 num 10부터 99까지를 span에 담음.
        //  css1: font-size 10~49부여해서 출력
        //  css2: color를 임의로 부여
        function onCount(){
            
            //  0부터 99까지 랜덤 정수 부여
            num = parseInt( Math.random() * 90 ) + 10;
            
            $span = $("<span></span>");
            
            $span.html(num);
            
            //  css1: font-size 10~49부여해서 출력
            $span.css("font-size", parseInt(Math.random() * 40) + 10 );
            
            //  css2: color를 임의로 부여
            $span.css("color", "#"+(parseInt(Math.random()*0xffffff)).toString(16) );
            
            //  css3: display로 inline-block 부여
            $span.css("display","inline-block");
            
            $span.appendTo($panel);
            
            //  window화면이 0부터 scroll되었을때의 마지막화면으로 이동시켜줌.
            window.scrollTo(0, document.body.scrollHeight);
            
        }
        
    </script>
</head>
<body>
    <div>       
        <div id="panel">
 
        </div>
    </div>      
</body>
</html>

clearInterval - setInterval 멈추기

clearInterval()는 정의내린 setInterval()를 멈출수 있음.

여기서 재미있는 부분

setInterval를 변수에 담아두면, 향후에, interval를 멈추는 clearInterval()함수를 사용할 수 있음

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>추첨기</title>
    <style>
        body{
            font-size:9pt;
        }
        #panel{
            border:1px #000000 solid;
            line-height:400px;
            font-size:100px;
            width:400px;
            height:400px;
            text-align:center;
            vertical-align:middle;
        }
    </style>

    <script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" >

        var $panel; // 출력화면 변수
        var num; // 결과 숫자 변수
        var totalMem; // 참가인원 변수
        var mySetInterval; // setInterval 함수를 넣을 변수

        $(document).ready(function(){

            $panel = $("#panel");

            // bind 함수를 통해서 click 이벤트에 onStart 함수를 묶음.
            $("#btn_Start").bind("click", onStart );

            // bind 함수를 통해서 click 이벤트에 onStop 함수를 묶음.
            $("#btn_Stop").bind("click", onStop );

        });

        function onStart(){
            // setInterval를 변수에 담아두면, 향후에, interval를 멈추는 clearInterval()함수를 사용할 수 있음
            mySetInterval = setInterval( onCountNum , 20);

        }

        function onCountNum(){
            totalMem = $("#totalWrap").val();

            num = parseInt( Math.random() * totalMem ) + 1;
            $panel.css("font-size", parseInt( Math.random() * 300 ) + 100);
            $panel.css("color", "black");
            $panel.html(num);
        }

        function onStop(){

            // clearInterval()함수 사용법: clearInterval( 멈추고싶은 setInverval를 담은 변수 );
            clearInterval(mySetInterval);

            $panel.css({"font-size":300, "color":"red"});

        }

    </script>
</head>
<body>
    <div>

        <div id="panel" >

        </div>
        <div id="nav">
            참여인원 : <input type="text" id="totalWrap" value="10"></input>
            <button id="btn_Start">시작</button>
            <button id="btn_Stop">멈춤</button>
        </div>
   </div>
</body>
</html>

상태변수
특정이벤트 진행유무에 대해서 확인하기 위해, 특정 임의변수를 만들어서, 특정값을 집어넣음.
그 값에 따라서, if문으로 이벤트 제어

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>추첨기</title>
    <style>
        body{
            font-size:9pt;
        }
        #panel{
            border:1px #000000 solid;
            line-height:400px;
            font-size:100px;
            width:400px;
            height:400px;
            text-align:center;
            vertical-align:middle;
        }
    </style>

    <script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" >

        var $panel;
        var num;
        var totalMem;
        var mySetInterval;
        var isPlay = false;

        $(document).ready(function(){

            $panel = $("#panel");

            $("#btn_Start").bind("click", onStart);

            $("#btn_Stop").bind("click", onStop);

        });

        function onStart(){

            if(isPlay == false){
                mySetInterval = setInterval( onCount , 20);
                $("#totalWrap").attr("disabled", "disabled");
                isPlay = true;
            }

        }

        function onStop(){

            if(isPlay == true){
                clearInterval( mySetInterval );
                $panel.css({"font-size": 300, "color":"purple"});
                $("#totalWrap").removeAttr("disabled");
                isPlay = false;

            }


        }

        function onCount(){
            totalMem = $("#totalWrap").val();
            num = parseInt( Math.random() * totalMem ) + 1;

            $panel.css({"font-size": parseInt( Math.random() * 200 ) +100});
            $panel.html(num);

        }

    </script>
</head>
<body>
    <div>

        <div id="panel" >

        </div>
        <div id="nav">
            참여인원 : <input type="text" id="totalWrap" value="10"></input>
            <button id="btn_Start">시작</button>
            <button id="btn_Stop">멈춤</button>
        </div>
   </div>
</body>
</html>

화면위치좌표

저작자표시 비영리 변경금지

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

jquery, javascript_스터디8( animate, 이미지 슬라이더 직접코딩, 이미지 갤러리 직접코딩, a 링크 누르면 이동 금지 ) (0)	2018.03.07
jquery, javascript_스터디7( 애니메이션-show, hide, toggle, slideDown, slideUp, slideToggle, 애니메이션 중복막기, stop, fadeIn, fadeOut, fadeToggle, fadeTo ) (0)	2018.03.05
jquery, javascript_스터디6( 위치 활용: 이미지 x, y축으로 움직이기, 스크롤값이용 이미지 올리기) (0)	2018.02.28
jquery, javascript_스터디4( attr, click, mouseover, mouseout, 임의함수이벤트걸기, bind, unbind, setInterval, Math.random, parseInt ) (0)	2018.02.21
jquery, javascript_스터디3(요소찾기: 태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기 ) (0)	2018.02.19
jquery, javascript_스터디2(함수, 내장함수, 외장함수, jquery사용법) (0)	2018.02.12

jquery, javascript_스터디4( attr, click, mouseover, mouseout, 임의함수이벤트걸기, bind, unbind, setInterval, Math.random, parseInt )

2018. 2. 21. 22:25

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">
<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>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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

이벤트: click, mouseover, mouseout

이벤트를 걸어주는 방식 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>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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

이벤트를 걸어주는 방식 2. 임의 함수 function만들어서 이벤트에 걸어주기

<!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>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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

이벤트를 걸어주는 방식 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">
<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>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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

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>

저작자표시 비영리 변경금지

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

jquery, javascript_스터디7( 애니메이션-show, hide, toggle, slideDown, slideUp, slideToggle, 애니메이션 중복막기, stop, fadeIn, fadeOut, fadeToggle, fadeTo ) (0)	2018.03.05
jquery, javascript_스터디6( 위치 활용: 이미지 x, y축으로 움직이기, 스크롤값이용 이미지 올리기) (0)	2018.02.28
jquery, javascript_스터디5( setInterval 활용한 랜덤숫자 css, clearInterval, 상태변수, 화면위치좌표:position, outerHeight, outerWidth, scrollTop, scrollLeft, top, left ) (0)	2018.02.26
jquery, javascript_스터디3(요소찾기: 태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기 ) (0)	2018.02.19
jquery, javascript_스터디2(함수, 내장함수, 외장함수, jquery사용법) (0)	2018.02.12
jquery, javascript_스터디1(변수, 개체속성, alert, confirm, if) (0)	2018.02.12

PREV 1 2 3 4 5 6 7 8 ···10 NEXT

강서딸바보's TECH

jquery, javascript_스터디6( 위치 활용: 이미지 x, y축으로 움직이기, 스크롤값이용 이미지 올리기)

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

jquery, javascript_스터디5( setInterval 활용한 랜덤숫자 css, clearInterval, 상태변수, 화면위치좌표:position, outerHeight, outerWidth, scrollTop, scrollLeft, top, left )

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

jquery, javascript_스터디4( attr, click, mouseover, mouseout, 임의함수이벤트걸기, bind, unbind, setInterval, Math.random, parseInt )

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

+ Recent posts

티스토리툴바