Question

我使用了2个jQuery插件，一个名为Cycle，用于在鼠标悬停时循环显示图像（当鼠标在电视机外时停止循环），另一个称为Cursometer，用于跟踪鼠标速度。我想将2个插件集成在一起，这样循环的速度取决于鼠标的速度。但是，当我将Cycle API调用的一部分添加到Cursometer的speed属性中时，Cycle函数停止工作。我是JQuery的新手，这与范围或立即调用有什么关系，当我将其插入到其他插件调用（Cursometer）中时，为什么循环插件部分代码不起作用？

循环应如何运作的示例：http://jsfiddle.net/sealife24/rwmLf63r/2/

JS在这里： http://jsfiddle.net/sealife24/wsvoyue5/

    $('.slideshow-block').cursometer({
        onUpdateSpeed: function(mouseSpeed) {
            // mouseSpeed is the current cursor speed
            var currSpeed = parseInt(mouseSpeed);
            $speedometer.text(mouseSpeed);

            /* cycle plugin begin */
            $('.slides').cycle({
                fx:     'none',
                speed:   100,   // want to pass currSpeed here, but it didn't work, even doesn't work with a number here
                timeout: 70

            }).cycle("pause");

            $('.slideshow-block').hover(function(){
                $(this).find('.slides').addClass('active').cycle('resume');
            }, function(){
                $(this).find('.slides').removeClass('active').cycle('pause');
            });
            /* cycle plugin end */

        }

        /* if move the cycle plugin part here, cycle will work, but there is no way I could dynamically get the mouseSpeed from the Cursometer plugin */

    });

Answer 1

似乎我们无法动态地为此插件设置速度或超时。我试过，这是我能做到的。

JsFiddle

 var $speedometer = $('#speedometer');

$('.slideshow-block').cursometer({
    onUpdateSpeed: function(mouseSpeed) {
        var currSpeed = parseInt(mouseSpeed*100);
        $speedometer.text(currSpeed);
        var slide= $(this).find('.slides');
        var opts = slide.data("cycle.opts");
        opts.timeout = currSpeed==0?(0.1):currSpeed;
        slide.cycle("resume");
        /* cycle plugin begin */
               /* cycle plugin end */

    }
});
 $('.slides').cycle({
            fx:     'none',
           // speed:   100,   // want to pass currSpeed here, but it didn't work
            timeout: 70

        }).cycle("pause");;

        $('.slideshow-block').hover(function(){
            $(this).find('.slides').addClass('active').cycle('resume');
        }, function(){
            $(this).find('.slides').removeClass('active').cycle('pause');
        });

Answer 2

好的，所以我查看了你正在使用的插件，而cursometer，很简单，你得到了那个部分。对于幻灯片插件，您应该只需将currSpeed放入速度变量，然后拨打＆＃39;暂停＆＃39;，如果您拨打＆＃39; next＆＃39;作为命令字符串，它强制它到循环中的下一张幻灯片。让我知道这对你有什么用，我会尽可能地帮助你。

   $('.slideshow-block').cursometer({
        onUpdateSpeed: function(mouseSpeed) {
            // mouseSpeed is the current cursor speed
            var currSpeed = parseInt(mouseSpeed);  
            /* cycle plugin begin */
            $('.slides').cycle({
                fx:     'none',
                speed:   currSpeed, //call currSpeed variable here
                timeout: 70
            }).cycle('next'); //call next to force the new slide to appear
        }    
    }); //this covers the part of the slide show when you move the mouse over it

   //this should be called outside of the above function so that it doesn't conflict,
  // but I'm not sure what you are doing with it
    $('.slideshow-block').hover(function(){
            $(this).find('.slides').addClass('active').cycle('resume');
        }, function(){
            $(this).find('.slides').removeClass('active').cycle('pause');
    });

我希望这可以帮助你，如果这个答案对你有帮助，请告诉我

在另一个插件中调用jQuery插件会停止工作吗？

2 个答案: