탐색 메뉴에서 jQuery Cycle Plugin을 사용하는 방법

Question

jquery Cycle Plugin을 div 내에서 전환하고 표시하는 방법으로 궁금해 왔습니다. 나는 실제 내용으로 div를 보유 할 부모 클래스 컨테이너를 만든 다음 부모 클래스에서 cycle을 사용하려고 생각했습니다. 페이지 매김에 대한 문서를 읽었지 만, 페이지 네비게이션 메뉴를 어떻게 만들 수 있습니까? Cycle Plugin과 함께 제공되는 "#nav"id를 편집해야합니까, 아니면 이미 만든 탐색을 사용할 수 있습니까? 나는 이것에 대해 또 다른 질문을 보았지만 어떻게 작동했는지 이해하지 못했습니다 .. 각 링크는 링크 된 div에 해당합니다. 즉, About 링크가 클릭 될 때마다 div에 관해 나타납니다. 올바른 방향으로 나아질 것입니다.

Answer 1

사이클 데모를 어지럽히고 읽은 후, 정말 간단하다는 것을 알았습니다. 내 탐색 ul에 #menu의 ID를 부여한 다음 그에 따라주기 스크립트를 변경했습니다. 'EQ #menu 리 ('+ IDX + ')는'

탐색 및 슬라이드 쇼 HTML

<div class="navigation"> 
<ul id="menu"> 
     <li><a href="#">home</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">services</a></li> 
     <li><a href="#">contact</a></li> 
    </ul> 
</div> 

<div id="slideshow"> 
     <div> 
      <h1>Title One</h1> 
      <p>Description for title one</p>   
     </div> 
     <div> 
      <h1>Title two</h1> 
      <p>Description for title two</p>   
     </div> 
     <div> 
      <h1>Title Three</h1> 
      <p>Description for title three</p>   
     </div> 
     <div> 
      <h1>Title Four</h1> 
      <p>Description for title four</p>   
     </div> 
    </div> 

나는 #menu 할 수있는 플러그인의 스크립트에서 호출기 옵션에 pagerAnchorBuilder 기능 반환 스크립트를 변경

플러그인 스크립트

$('#slideshow').cycle({ 
fx:  'turnDown', 
speed: 'fast', 
timeout: 0, 
pager: '#menu', 
pagerAnchorBuilder: function(idx, slide) { 
    // return selector string for existing anchor 
    return '#menu li:eq(' + idx + ') a'; 
} 
});