JQuery暂停幻灯片放映并使用setInterval恢复

Question

我知道那里有很多JQuery幻灯片，但是我正在编写自己的代码并遇到了一个障碍，我没有找到具体的答案。

背景：自动JQuery幻灯片插件，在悬停/暂停时暂停/恢复

问题：如何在mousenter上暂停幻灯片放映，然后在mouseleave上完成setInterval的剩余时间段，而不是再次触发setInterval。

解决方案：我认为实现此目的的唯一方法是使用附加延迟的自调用方法和stop（）来处理鼠标行为，这将允许暂停的动画恢复其适当的剩余而不是再次解雇这个方法？

你有什么想法？

以下是代码：

    (function( $ ){

    var methods = {

        init: function() {

            var cycle = window.setInterval(methods.automate, 1000);

            $('.slider_control').on('click', 'span', function(){
                methods.automate( $(this).attr('slideNumber') );
            });

            $('.slider_master_container')
                .on({
                        'mouseenter': function() {
                            clearInterval(cycle);
                        },
                        'mouseleave': function() {
                            cycle = window.setInterval(methods.automate, 1000);
                        }
                });

        },

        automate: function( el ) {
            var $active = $('.slide.active'),
                $next   = el ? $('.slide[slideNumber=' + el) : $active.nextOrFirst();
            $next.css('z-index', 2);
            $active.fadeOut(1500, function() {
                $active.css('z-index', 1).show().removeClass('active');
                $next.css('z-index', 3).addClass('active');
            });
        }

    };

    $.fn.smartSlider = function( method ) {
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.smartSlider' );
        }
    };

})( jQuery );