Jquery Cycle插件菜单悬停效果自动启动

时间:2012-06-13 08:33:01

标签: jquery menu hover autostart

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

谢谢你的帮助 朱

1 个答案:

答案 0 :(得分:1)

您对冲突的假设可以是句柄而不是$ use jQuery,或者您可以使用自己的自定义ID,因此可以将jquery设置为使用jq来执行此操作:

var jq=$.noConflict();

这意味着你可以同时使用jquery和mootools,而不是给你带来麻烦。

您找到的这个插件有选项暂停以启用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中:)