이미지 배너

jQuery 2014. 5. 13. 21:56

<!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" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>0513</title>
  <style type="text/css">
   body, ul, li {margin:0; padding:0;}
   ul {position:relative; margin:30px; list-style:none; width:309px; text-align: right;}
   ul li { display:inline-block; font-size:0; line-height:0; padding:0 2px;}
   ul li a {display:block; width:12px; height:12px; border:1px orange solid; border-radius:10px; background:yellow;}
   ul li img {display:none; position:absolute; right:0; top:22px;}
   ul li.on img {display:block; }
   ul li.on a {background:red; }
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   jQuery(function(){
    
    //return false;
     //멈춤(멈춘 후 거꾸로 진행), 진행, 반환
    
    $("#banner>li:first").addClass ('on');
    
    var chNum = 0;    
    var timerId = setInterval(count,2000);
    
      $('#banner>li').hover(function () {
        $(this).css('cursor','pointer');
        clearInterval(timerId);
      },function(){
     $(this).css('cousr','Default');
     timerId = setInterval(count,1000);
      });
     

    
            
    $("#banner>li>a").hover(function(){
     chNum = $(this).parent('li').index();
     //마우스를 올렸을때
     //console.log($(this).html());
     //console.log($(this).parent('li').index());
     //$(this).addClass('on');
     //siblings 형제노드
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     ch(chNum);
     
    },function(){
     //마우스가 나갔을때
     //$('#banner>li:eq('+chNum+')').removeClass('on');
    });
    
    
        
    function ch(arg){ //arg = chNum
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     $('#banner>li:eq('+arg+')').addClass('on').siblings('li').removeClass('on');
    }
    
    
    function count(){
    
     chNum += 1;
     ch(chNum);
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     
     if(chNum == 4){
        chNum = -1; //현재 위치에서는 0 이 아닌 -1로 셋팅 --> 위에서 +1을 하고 있음
      
     }
    } 
       
   }); 
   
  </script>
 </head>
 <body>
  <ul id="banner">
   <li><a href="#a" title="이벤트1"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban__taiwan_140429.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트2"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_aus_140430.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트3"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_140421.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트4"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hsbn_140411_cam(0).jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트5"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_cb_140429.jpg" alt="" />
   </li>
  </ul>
 </body>
</html>

'jQuery' 카테고리의 다른 글

0527 duration  (0) 2014.05.27
배너2  (0) 2014.05.15
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
신현석님 Jquery AIP 정리  (1) 2012.08.29
마우스오버 아웃  (0) 2012.07.10
:

티스토리툴바