테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 효과2입니다.

· 12년 전 · 1363 · 4

fadein 효과를 사용한 2번째 예제입니다.
       
     <ul id="scroll">
              <li id="main_img_img0" style="position:absolute;z-index:10;top:0px;left:0;width:100%;"><img src="images/common/visual1.jpg" title="" alt=""></li>
              <li id="main_img_img2" style="position:absolute;z-index:11;top:0px;left:0;width:100%;display:none;"><img src="images/common/visual2.jpg" title="" alt=""></li>
              <li id="main_img_img3" style="position:absolute;z-index:11;top:0px;left:0;width:100%;display:none;"><img src="images/common/visual3.jpg" title="" alt=""></li>
            </ul>


  <script type="text/javascript">
  //<![CDATA[

  var s = null;

  var j = 1;
  var times = 4000;
  function TiVis(){
     clearInterval(s);

     ButtonClear();

     if( j == 0 ){ $("#main_img_img0").css({zIndex : 13});$("#main_img_img2").hide(); $("#main_img_img_tab1").attr('src','images/common/main_img_on.gif');$("#main_img_img0").fadeIn(1000);}
     if( j == 1 ){ $("#main_img_img0").css({zIndex : 10});$("#main_img_img0").hide(); $("#main_img_img3").hide(); $("#main_img_img_tab2").attr('src','images/common/main_img_on.gif');$("#main_img_img2").fadeIn(1000);}
     if( j == 2 ){ $("#main_img_img_tab3").attr('src','images/common/main_img_on.gif'); $("#main_img_img3").fadeIn(1000); }

      j++;
      if(j==3) {
        j=0;
      }
      s = setInterval( "TiVis()", times );
    }

window.onload = function(){
  /*$("#main_img_img0").css({zIndex : 10});
  $("#main_img_img2").css({zIndex : 11});
  $("#main_img_img3").css({zIndex : 12});*/
  $("#main_img_img_tab1").css({cursor:'pointer'});
  $("#main_img_img_tab2").css({cursor:'pointer'});
  $("#main_img_img_tab3").css({cursor:'pointer'});
  s = setInterval( "TiVis()", times );
}

function ButtonClear(){
     $("#main_img_img_tab1").attr('src','images/common/main_img_off.gif');
     $("#main_img_img_tab2").attr('src','images/common/main_img_off.gif');
     $("#main_img_img_tab3").attr('src','images/common/main_img_off.gif');
}
$(document).ready(function(){
  $(".number_tab img").click(function(){
    j = Number($(this).val());

     if( j == 1 ){ $("#main_img_img0").css({zIndex : 13});$("#main_img_img2").hide();}
     if( j == 2 ){ $("#main_img_img0").css({zIndex : 10});$("#main_img_img0").hide(); $("#main_img_img3").hide();}

    ButtonClear();
    TiVis();
  });
});
  //]]>
  </script>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 4개

고맙습니다..짱!

게시글 목록

번호 제목
20636
20632
20627
11160
20626
20625
20619
17684
20182
11154
11151
11143
20607
20601
11131
11124
11121
11118
11113
11109
20587
11102
11098
11092
11086