JQuery Cycle 예제 (롤링,전후버튼,앵커)

<div class="app_cover_img">                        //롤링대상 이미지들
     <img src="롤링할 이미지1.jpg" alt="" />
     <img src="롤링할 이미지2.jpg" alt="" />
     <img src="롤링할 이미지3.jpg" alt="" />
     <img src="롤링할 이미지4.jpg" alt="" />
     <img src="롤링할 이미지5.jpg" alt="" />
     <img src="롤링할 이미지6.jpg" alt="" />
     <img src="롤링할 이미지7.jpg" alt="" />
</div>

 

<div class="app_cover_btn">                        //전후 페이저 버튼
     <a href="javascript:;" class="arr1"><img src="이전버튼 이미지" alt="back" class="app_cover_btn1"/></a>
     <a href="javascript:;" class="arr2"><img src="다음버튼 이미지" alt="next" class="app_cover_btn2"/></a>
</div>

<div class="app_cover">                            //앵커 div영역
     <ul class="app_cover_tab">
     </ul>
</div>

 

---------------------------------------------------------------------------------------------------------------

<Javascript>

 

var clickHandler = 'click';

$cycler = $('.app_cover_img'), //사이클 대상을 감싸는 div
 prev = function() {$cycler.cycle( prevIndex, 'scrollRight');},
 next = function() {$cycler.cycle( nextIndex, 'scrollLeft');
};

$cycler.cycle({
 //blindX,blindY,blindZ,cover,curtainX,curtainY,fade,fadeZoom,growX,growY,scrollUp,scrollDown,scrollLeft,

     scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,wipe,zoom 롤링 종류
 fx      : 'scrollHorz'
 , easing    : 'easeInOutExpo'
 , speed     : 500
 , timeout    : 2000
 , random    : 0
 , startingSlide   : 0
 , pauseOnPagerHover  : true
 , cleartypeNoBg   : true
 , pager     : '.app_cover_tab'   //롤링 페이저를 만들 div
 , pagerAnchorBuilder   : function(idx, slide){  //페이저를 만드는 함수정의
  var navHtml = '';
  var onoff = 'app_cover_tab_off';

  if (idx == 0) {
     onoff = 'app_cover_tab_on';
  }

  navHtml = navHtml + '<li class="'+onoff+'"><a href="javascript:;" class="tab'+(idx+1)+'"></a></li>';

  return navHtml;
 },
 updateActivePagerLink : function(pager, currSlideIndex) {  //페이저를 누를때마다 실행될 함수 정의
      $(pager+' li').removeClass('activeSlide').filter('li:eq('+currSlideIndex+')').addClass('activeSlide');
      $(pager+' li').removeClass('app_cover_tab_on').addClass('app_cover_tab_off');
      $(pager+' li.activeSlide').removeClass('app_cover_tab_off').addClass('app_cover_tab_on');
 }
 , after    : function(currSlideElement, nextSlideElement, options) {  //다음페이지를 보여주고 나서 실행할 함수 정의
      slideIndex = options.currSlide;
      nextIndex = slideIndex + 1;
      prevIndex = slideIndex -1;

  if (slideIndex == 0) {
       //fnMoveBox(1);
  } else {
       //fnMoveBox(0);
  }

  if (slideIndex == options.slideCount-1) {
       nextIndex = 0;
  }

  if (slideIndex == 0) {
       prevIndex = options.slideCount-1;
  }
 }
});

 

$('.arr1').bind(clickHandler, prev);  //이전버튼 이벤트 연결
$('.arr2').bind(clickHandler, next);  //다음버튼 이벤트 연결