컴

제이쿼리 효과2입니다.

· 2013-07-01 (월) 15:15:52 · 3914 · 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>

첨부파일

제이쿼리효과2.txt (2.3 KB) 35회 2013-07-01 15:15
|

댓글 4개

감사합니다.
2013-07-02 (화) 09:57:46
고맙습니다..짱!
이것도 역시
감사합니다.^^
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
jQuery 13-07-14 조회 3,975
jQuery 13-07-14 조회 5,548
jQuery 13-07-14 조회 4,852
jQuery 13-07-14 조회 4,914
jQuery 13-07-14 조회 4,275
jQuery 13-07-14 조회 5,170
jQuery 13-07-13 조회 3,456
JavaScript
[JavaScript]
13-07-11 조회 3,750
PHP 13-07-11 조회 4,843
PHP 13-07-11 조회 4,377
JavaScript 13-07-10 조회 3,670
기타 13-07-09 조회 3,666
JavaScript 13-07-09 조회 3,581
JavaScript 13-07-09 조회 4,604
PHP 13-07-08 조회 3,164
MySQL 13-07-07 조회 4,915
PHP 13-07-04 조회 3,415
기타 13-07-04 조회 1.8만
웹서버 13-07-04 조회 2,834
PHP 13-07-04 조회 3,489
기타 13-07-04 조회 4,441
PHP 13-07-04 조회 3,460
JavaScript 13-07-04 조회 3,371
JavaScript 13-07-04 조회 3,107
JavaScript 13-07-04 조회 3,488
PHP 13-07-03 조회 7,060
jQuery 13-07-01 조회 5,863
jQuery 13-07-01 조회 4,828
jQuery 13-07-01 조회 3,915
jQuery 13-07-01 조회 5,547