웹프로그래밍

Global It Leader!!


jQuery


 
 

제이쿼리 롤링 스크립트

페이지 정보

작성자 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 3,352회 작성일 15-05-12 23:34

본문

<div id="slider3">
 <a class="prev" id="left" href="#"><img alt="이전" src="http://mylko72.maru.net/jquerylab/images/btn/btn_arr_l.png"></a>
 <div class="top-visu">
  <ul class="life-style" id="lifestyle">
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_car_carlife_.jpg"><p class="ac">1</p></li>
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_club_skcard_.jpg"><p class="ac">2</p></li>
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_daemyung_event_.jpg"><p class="ac">3</p></li>
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_doubledouble_event_.jpg"><p class="ac">4</p></li>
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_member_event_.jpg"><p class="ac">5</p></li>
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_premium_sale_.jpg"><p class="ac">6</p></li>
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_show_culture_.jpg"><p class="ac">7</p></li>
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_vip_open_.jpg"><p class="ac">8</p></li>
   <li><img alt="" src="http://mylko72.maru.net/jquerylab/images/visu_member_event_.jpg"><p class="ac">9</p></li>
  </ul>
 </div>
 <a class="next" id="right" href="#"><img alt="다음" src="http://mylko72.maru.net/jquerylab/images/btn/btn_arr_r.png"></a>
 <div class="ac" id="control">
  <button class="bStart">재생</button>
  <button class="bStop">정지</button>
 </div>
</div>

 

 

<style type="text/css">
 #slider3 {position:relative; display:inline-block; width:740px; height:473px; margin-left:15px;}
 #slider3 a#left {position:absolute; left:20px; top:200px; z-index:20;}
 #slider3 a#right {position:absolute; right:20px; top:200px; z-index:20;}
 #slider3 .top-visu {position:relative; width:738px; height:450px; overflow:hidden;}
  #slider3 .top-visu ul.life-style {position:absolute; left:0px; top:0px;}
  #slider3 .top-visu ul.life-style:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
   #slider3 .top-visu ul.life-style li {position:relative; float:left; width:246px;}
 #slider3 #control {text-align:center;}
</style>

 

<script type="text/javascript">
 function fn_rollToEx(containerID,slideID,controlID,stepNum,autoStart){

  // 롤링할 객체를 변수에 담아둔다.
  var el = $('#'+containerID).find('#'+slideID);
  var lastChild;
  var speed = 3000;
  var timer = 0;
  var autoplay = false;

  el.data('prev', $('#'+containerID).find('.prev')); //이전버튼을 data()메서드를 사용하여 저장한다.
  el.data('next', $('#'+containerID).find('.next')); //다음버튼을 data()메서드를 사용하여 저장한다.
  el.data('size', el.children().outerWidth());  //롤링객체의 자식요소의 넓이를 저장한다.
  el.data('len', el.children().length);    //롤링객체의 전체요소 개수
  el.data('animating',false);
  el.data('step', stepNum);        //매개변수로 받은 step을 저장한다.
  el.data('autoStart', false);        //매개변수로 받은 step을 저장한다.
  el.data('play', null);
  el.data('stop', null);

  el.css('width',el.data('size')*el.data('len'));  //롤링객체의 전체넓이 지정한다.

  if(arguments[4]==true){
   el.data('autoStart', autoStart);
  }

  if(arguments[2]!= undefined){
   el.data('play', $('#'+controlID).find('.bStart'));
   el.data('stop', $('#'+controlID).find('.bStop'));
  }

  if(el.data('autoStart')){
   if(timer==0){
    timer = setInterval(moveNextSlide, speed);
    autoplay = true;
   }
  }

  el.bind({
   mouseenter:function(){
    if(!autoplay) return false;

    if(timer!=0 && el.data('autoStart')){
     clearInterval(timer);
     timer=0;
    }
   },
   mouseleave:function(){
    if(!autoplay) return false;

    if(timer==0 && el.data('autoStart')){
     timer = setInterval(moveNextSlide, speed);
    }
   }
  });


  //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
  el.data('prev').bind({
   click:function(e){
    e.preventDefault();
    movePrevSlide();
   },
   mouseenter:function(){
    if(!autoplay) return false;

    if(timer!=0 && el.data('autoStart')){
     clearInterval(timer);
     timer=0;
    }
   },
   mouseleave:function(){
    if(!autoplay) return false;

    if(timer==0 && el.data('autoStart')){
     timer = setInterval(moveNextSlide, speed);
    }
   }
  });

  //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
  el.data('next').bind({
   click:function(e){
    e.preventDefault();
    moveNextSlide();
   },
   mouseenter:function(){
    if(!autoplay) return false;

    if(timer!=0 && el.data('autoStart')){
     clearInterval(timer);
     timer=0;
    }
   },
   mouseleave:function(){
    if(!autoplay) return false;

    if(timer==0 && el.data('autoStart')){
     timer = setInterval(moveNextSlide, speed);
    }
   }
  });

  if(arguments[4]!= undefined){
   el.data('play').bind({
    click:function(){
     if(timer==0 && el.data('autoStart')){
      timer = setInterval(moveNextSlide, speed);
      autoplay = true;
     }
    }
   });

   el.data('stop').bind({
    click:function(){
     if(timer!=0 && el.data('autoStart')){
      clearInterval(timer);
      timer=0;
      autoplay = false;
     }
    }
   });
  }

  function movePrevSlide(){
   if(!el.data('animating')){
    //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
    var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
    lastItem.prependTo(el);  //복사된 요소를 롤링객체의 앞에 붙여놓는다.
    el.children().eq(-(el.data('step')+1)).nextAll().remove(); //step개수만큼 선택된 요소를 끝에서 제거한다
    el.css('left','-'+(el.data('size')*el.data('step'))+'px'); //롤링객체의 left위치값을 재설정한다.
   
    el.data('animating',true); //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.

    el.animate({'left': '0px'},'normal',function(){  //롤링객체를 left:0만큼 애니메이션 시킨다.
     el.data('animating',false);
    });
   }
   return false;
  }

  function moveNextSlide(){
   if(!el.data('animating')){
    el.data('animating',true);

    el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){ //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
     //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
     var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
     firstChild.appendTo(el); //복사된 요소를 롤링객체의 끝에 붙여놓는다.
     el.children().filter(':lt('+el.data('step')+')').remove(); //step개수만큼 선택된 요소를 앞에서 제거한다
     el.css('left','0px'); ////롤링객체의 left위치값을 재설정한다.

     el.data('animating',false);
    });
   }
   return false;
  }

 }
</script>

댓글목록

등록된 댓글이 없습니다.

전체 142
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
102 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4913 07-11
101 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3417 06-24
100 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3528 12-22
99 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3712 08-13
98 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3644 08-04
97 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3818 07-17
96 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7189 06-16
95 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3506 06-04
94 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4306 05-20
93 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4553 05-20
92 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3235 05-13
열람중 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3353 05-12
90 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3291 05-12
89 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3253 05-01
88 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3143 04-23
87 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3272 04-17
86 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3242 02-03
85 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3212 01-12
84 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3225 04-04
83 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3676 01-30