배너2

jQuery 2014. 5. 15. 21:49

<!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>study-banner1</title>
  <style type="text/css">
   body, ul, li {margin:0; padding:0;}
   ul {list-style: none;  padding:30px; background:#FFFF00; text-align:center; height:202px;}
   ul li img {display:none; position:absolute; left:50%; top:30px; margin-left:-155px; width:309px; height:202px;}
   ul li.on img {display:block;}
   ul li { display:inline-block; padding-top:180px}
   ul li a {display:block; position:relative; z-index:1;  height:15px; width:15px; border:1px red solid; background:#fff;}   
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   jQuery(function(){
    
    var color = ["red","yellow","green"];
    //var colorNum = color.length;
    var liMenu = $("#banner>li").length;
    
    var menu = $("#banner>li").index();
    
    var timeRun = setInterval(count,2000);
    
    
    $("#banner>li").hover(function(){
     clearInterval(timeRun);
    },function(){
     timeRun = setInterval(count,2000);
     //setInterval(count,2000);
    });
    
    $("#banner>li>a").hover(function(){
     var menu = $(this).parent('li').index();
     
     
     
     /*$('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[menu]);*/
     move(menu);
    });
    
    
    function move(arg){
     
     $('#banner>li:eq('+arg+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[arg]);
     
    }
    
    
    function count(){
     menu +=1;
     move();
     /*
     $('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[menu]);
     */
     
     if(menu == liMenu){
      menu = -1; //위에서 한번 더하기 때문에  0이 아닌 -1을 해준다
     }
    }
    
    /* 
    function test (x) {
      z = x+y;
    }
    
    alert(test (1,3));
    */
   });
  </script>
 </head>

 <body>
  <ul id="banner">
   <li class="on"><a href="#a" title="이벤트1">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">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">3</a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_140421.jpg" alt="" />
   </li>  
  </ul>
 </body>
</html>

 

'jQuery' 카테고리의 다른 글

jquery 플러그인  (0) 2015.07.14
0527 duration  (0) 2014.05.27
이미지 배너  (0) 2014.05.13
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
신현석님 Jquery AIP 정리  (1) 2012.08.29
: