在另一個插件中調用jQuery插件會停止工作嗎？

Question

我使用了2個jQuery插件，其中一個稱為Cycle，用於在鼠標懸停在鼠標上時循環瀏覽圖像（當鼠標位於電視外部時停止循環播放），另一個用於跟蹤鼠標速度的稱為Cursometer。 我想將2個插件集成在一起，以便循環的速度取決於鼠標的速度。 但是，當我將Cycle API調用的一部分添加到Cursometer的speed屬性中時，Cycle函數停止工作。 我對JQuery還是很陌生，這與范圍界定或立即調用有什么關系，當我在另一個插件調用（Cursometer）中包含Cycle插件部件代碼時，為什么它不起作用？

循環應如何工作的示例： http : //jsfiddle.net/sealife24/rwmLf63r/2/

JSfiddle在這里： 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很簡單，您就了解了這一部分。 對於slides插件，您應該能夠只將currSpeed放入speed變量中，而不是調用“ pause”（如果您將“ next”作為命令字符串），則將其強制插入循環中的下一張幻燈片。 讓我知道這對您的工作原理，我會在這里為您提供盡可能多的幫助。

   $('.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');
    });

希望這對您有所幫助，無論如何，如果此答案對您有幫助，請告訴我