Question

我一直在想如何使用jquery Cycle Plugin作为在div中转换和显示我的内容的方法。我想创建一个父类容器，它将使用实际内容保存div，然后在父类上使用循环。我阅读了关于分页的文档，但是如何将分页设置为导航菜单？我是否只需要编辑Cycle Plugin附带的“#nav”ID，或者我可以使用我已经制作的导航？我在这里看到了另一个问题，但是不明白它是如何工作的。每个链接应该对应于链接到它的div，即每当点击关于链接时，应该出现关于div的任何解释。朝着正确的方向会很棒。

Answer 1

经过一番讨论并阅读循环演示之后，我发现它非常简单。我给导航ul了#menu的id，然后相应地更改了循环脚本。我将插件脚本中的pager选项更改为#menu，将pagerAnchorBuilder函数返回脚本更改为＆＃39; #menu li：eq（＆＃39; + idx +＆＃39;）a＆＃39; < / p>

导航和幻灯片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'; 
} 
});

如何在导航菜单中使用jQuery Cycle Plugin

1 个答案: