2

我试图让 jQuery Cycle 仅在幻灯片悬停时运行（这与它们内置的功能相反）。

这是我所在的位置：http: //jsfiddle.net/zSBMU/

$(document).ready(function() {

$('.slideshow').hover(
    function() {
        $(this).cycle({
            fx:     'fade',
            speed:   600,
            timeout: 300,
            pause:   0
        });
    },
    function(){
        $(this).cycle('stop');
    }
).trigger('hover');

​ });

第一次悬停时，它很棒，工作正常。但是，如果您尝试再次悬停同一个，它只会经历一次淡入淡出，而不是再次循环。

有任何想法吗？

请忽略一些粗略的代码，在这里使用一个非常古老的主题，试图清理它！

4

1 回答 1

2

您正在使用“停止”并重新创建循环，因此您在对象上添加了几个循环。

你必须使用“暂停”和“恢复”。

示例如下：

var cycleConfigured = false;
$(document).ready(function() {

    $('.slideshow').hover(
        function() {
            if(cycleConfigured)
                $(this).cycle('resume');
            else
            {
                $(this).cycle({
                    fx:     'fade',
                    speed:   600,
                    timeout: 300,
                    pause:   0
                });
                cycleConfigured = true;
            }
        },
        function(){
            $(this).cycle('pause');
        }
    ).trigger('hover');

});​

该变量cycleConfigured将用于控制我们的循环插件，以检查它是否已经实例化。或者，您可以创建它$(document).ready()，然后像这样暂停它：

$(document).ready(function() {
    // configure the cycle plugin
    $('.slideshow').cycle({
         fx:     'fade',
         speed:   600,
         timeout: 300,
         pause:   0
    });
    $('.slideshow').cycle('pause'); // pause it right away.

    $('.slideshow').hover(
        function() {
                $(this).cycle('resume'); // start playing.
        },
        function(){
            $(this).cycle('pause'); // pause the slideshow.
        }
    ).trigger('hover');

});​

然后你需要做的就是不停地$(this).cycle('pause')使用$(this).cycle('resume')。

有什么让我知道。

于 2012-04-17T21:46:47.910 回答