0

我正在尝试使用 Jquery Cycle 插件http://malsup.com/jquery/cycle/创建菜单驱动程序幻灯片，但我不知道如何使其正常工作。它把数字放在导航上？我还希望它自动循环但在菜单项悬停时停止。

我希望它在与此插件类似的情况下工作（注意我不能使用它，因为它是与其他 jquery 冲突的 mootools） http://www.devthought.com/wp-content/projects/mootools/barackslideshow/Demo /

这是我正在实施的代码

<script type="text/javascript" src="js/jquery.cycle.all.2.72v2.js.gz"></script>   
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        speed:       200,
        timeout:     0,
        pager:      '#nav',
        pagerEvent: 'mouseover',
        activePagerClass: 'activeSlide', // class name used for the active pager element
    });
});
</script>

<div id="nav">
        <a href="#">test1</a>
        <a href="#">test2</a>
        <a href="#">test3</a>
        <a href="#">test4</a>
        <a href="#">test5</a>
        <a href="#">test6</a>
      </div>        
<div id="slideshow"  class="pics">
<a href="#"><img src="images/1.jpg" alt="#" /></a>
<a href="#"><img src="images/2.jpg" alt="#" /></a>
<a href="#"><img src="images/3.jpg" alt="#" /></a>
<a href="#"><img src="images/4.jpg" alt="#" /></a>
<a href="#"><img src="images/5.jpg" alt="#" /></a>
<a href="#"><img src="images/6.jpg" alt="#" /></a>                           
</div>

谢谢你的帮助朱迪思

4

1 回答 1

1

您对冲突的假设可以是句柄而不是 $ 使用jQuery，或者您可以使用自己的自定义 id，这样 jquery 可以通过执行以下操作设置为使用 jq：

var jq=$.noConflict();

这意味着您可以同时使用 jquery 和 mootools 而不会给您带来问题。

您找到的这个插件有选项 pause 可以在 hive 上启用暂停，请参见此处。所以在你的情况下：

$(function() {
    $('#slideshow').cycle({
        speed:       200, //timer removed so it cycles automatically.
        pager:      '#nav',
        pause:      1, //pause on hover
        pagerEvent: 'mouseover',
        after: onAfter,
        activePagerClass: 'activeSlide' //Remove comma here
    });
});

//Use this to add/remove styling to your #navs.
function onAfter() { 
 }

它还指出你的容器的每个孩子都是一张幻灯片，所以在你的情况下，你<a>将是一张幻灯片，我建议将它包装在一个 div 中:)

于 2012-06-13T09:06:36.520 回答