如何使用带有导航菜单的 jQuery Cycle 插件

Question

我一直想知道如何使用 jquery Cycle 插件作为在 div 中转换和显示我的内容的一种方式。我想制作一个父类容器，它将包含实际内容的div，然后在父类上使用循环。我阅读了有关分页的文档，但是如何使分页成为我的导航菜单？我是否只需要编辑 Cycle 插件附带的“#nav”ID 还是可以使用我已经制作的导航？我在这里看到了另一个关于这个的问题，但不明白它是如何工作的。每个链接都应该对应于链接到它的 div，即每当点击 About 链接时，应该出现 about div。任何让我明白的解释在正确的方向上会很棒。

Answer 1

经过一番折腾和阅读循环演示后，我发现它真的很简单。我给我的导航 ul 提供了#menu 的 ID，然后相应地更改了循环脚本。我将插件脚本中的寻呼机选项更改为#menu，pagerAnchorBuilder函数返回脚本为'#menu li:eq(' + idx + ') a'

导航和幻灯片 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>

插件脚本

$('#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'; 
} 
});