jQuery Cycle插件菜单悬停效果自动启动答案

【问题标题】：Jquery Cycle plugin menu hover effect automatic startjQuery Cycle插件菜单悬停效果自动启动
【发布时间】：2012-06-13 08:33:01
【问题描述】：

我正在尝试使用 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>

感谢您的所有帮助朱迪思

【问题讨论】：

标签： jquery menu hover autostart

【解决方案1】：

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

var jq=$.noConflict();

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

你找到的这个插件有选项 pause 可以在 hove 上启用暂停，请参阅here。所以在你的情况下：

$(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 中:)

【讨论】：