컴

제이쿼리 효과2입니다.

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

댓글 4개

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

팁게시판

6,077건

디자인과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
제목 글쓴이 날짜 조회
13-08-22 조회 2,544
13-08-17 조회 3,260
13-08-17 조회 1,662
13-07-11 조회 2,666
13-07-11 조회 1,758
13-07-08 조회 1,198
13-07-04 조회 1,405
13-07-04 조회 1,380
13-07-04 조회 1,167
13-07-03 조회 3,014
13-07-01 조회 1,030
13-07-01 조회 1,359
13-07-01 조회 1,722
13-06-21 조회 3,575
13-06-14 조회 2,210
13-06-11 조회 1,069
13-06-06 조회 2,629
13-06-05 조회 1,459
13-05-11 조회 2,325
13-05-10 조회 1,627
13-05-10 조회 2,133
13-05-10 조회 1,573
13-05-08 조회 1,874
13-05-08 조회 1,197
13-05-08 조회 1,557