jquery timer 시간에 따른 이벤트 설정

jquery timer 타이머 시간에 따른 이벤트 설정

 

jQuery 가 정상적으로 동작하려면 우선 아래의 코드가 포함이 되어있어야 합니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

 

    <div id="noti_pop">
 
        <p class="ctrl" >
            <button type="button" id="pre" title="이전배너로 이동"><img src="img/main/pre.gif" width="14" height="13"  alt="이전배너" /></button>
            <button type="button" id="play" title="배너이동 재생"><img src="img/main/play.gif" width="14" height="13"  alt="재생" /></button>
            <button type="button" id="stop" title="배너이동 정지"><img src="img/main/stop.gif" width="14" height="13"  alt="정지" /></button>
            <button type="button" id="next" title="다음배너로 이동"><img src="img/main/next.gif" width="14" height="13"  alt="다음배너" /></button>
        </p>

        <ul class="Mainelement">
            <li><a href="#" title=""><img src="img/main/element_banner1e.png" width="251" height="366" onmouseout="this.src='img/main/element_banner1.png'" onmouseover="this.src='img/main/element_banner1e.png'" alt="산업체 기술개발 및 업무지원 - 공용장비 대여" /></a></li>
            <li><a href="#" title=""><img src="img/main/element_banner2.png" width="247" height="366" onmouseout="this.src='img/main/element_banner2.png'" onmouseover="this.src='img/main/element_banner2e.png'" alt="산학협력을 통한 과제수행의 내실화 - 캡스톤디자인" /></a></li>
            <li><a href="#" title=""><img src="img/main/element_banner3.png" width="248" height="366" onmouseout="this.src='img/main/element_banner3.png'" onmouseover="this.src='img/main/element_banner3e.png'" alt="실무교육을 통한 현장의 체험 - 학생현장실습" /></a></li>
            <li><a href="#" title=""><img src="img/main/element_banner4.png" width="248" height="366" onmouseout="this.src='img/main/element_banner4.png'" onmouseover="this.src='img/main/element_banner4e.png'" alt="효율적인 추진과 능동적인 참여 - 가족회사 가입" /></a></li>
            <li><a href="#" title=""><img src="img/main/element_banner5.png" width="248" height="363" onmouseout="this.src='img/main/element_banner5.png'" onmouseover="this.src='img/main/element_banner5e.png'" alt="기업의 경쟁력 강화 프로그램 - 기술지도" /></a></li>
        </div>

    </div>
  

 

<script>
jQuery(function($){

 var noti_pop = $('#noti_pop');
 var index=0;
 var limit=noti_pop.find('ul>li').size();
 var isOn = 0;
 var isTimer = 1;

 function swapLeft(){  
  if(isOn){
   var htag='<li>'+noti_pop.find('ul>li:eq(0)').html()+'</li>';
   noti_pop.find('ul>li:eq(0)').animate({
    left: '-=30',
    width: '0',
    opacity: '0'
   }, 1000, function(){
    noti_pop.find('ul>li:eq(0)').remove();
    isOn=0;
   });
   noti_pop.find('ul').append(htag);
  }

  
  //noti_pop.find('ul>li:last').css('display','none');
 }

 function swapRight(){
  if(isOn){
   var htag='<li>'+noti_pop.find('ul>li:last').html()+'</li>';
   noti_pop.find('ul>li:last').animate({
    left: '+=30',
    width: '0',
    opacity: '0'
   }, 1000, function(){
    noti_pop.find('ul>li:last').remove();
    isOn=0;
   });
   noti_pop.find('ul').prepend(htag);
  }

  
  //noti_pop.find('ul>li:last').css('display','none');
 }

 function timerAction(){ // 방향은 왼쪽으로 <---
  if(isTimer && !isOn){
   isOn=1;
   swapLeft();
  }
 }

 var timer = window.setInterval(timerAction, 3000);
  

 $('#pre').click(function(){
  if(!isOn){
   isOn=1;
   swapRight();
  }
 });

 $('#play').click(function(){
  isTimer=1;
  //alert('play');
 });
 
 $('#stop').click(function(){
  isTimer=0;
  //alert('stop');
 });

 $('#next').click(function(){
  if(!isOn){
   isOn=1;
   swapLeft();
  }
 });

 

</script>

 

 

위의 예제 코드는 예제 소스 코드입니다. 가장 중요한 핵심은

var timer = window.setInterval(timerAction, 3000);

이 코드 입니다. 즉 타이머라는 변수를 선언하는데 3000 곧 3초마다 timerAction 이라는 이름을 가진 함수를 실행하는 것을 의미합니다. 따라서 timerAction 함수에다가 무엇을 선언하느냐에 따라서 달라지겠죠?