1

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

背景：一个自动化的 JQuery 幻灯片插件，在悬停/退出时具有暂停/恢复

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

解决方案：我认为这样做的唯一方法是使用带有延迟的自调用方法和 stop() 来处理鼠标行为，这将允许暂停的动画恢复其适当的剩余部分，而不是触发该方法再次？

你觉得呢？你有没有什么想法？

这是代码：

    (函数($){

    变种方法 = {

        初始化：函数（）{

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

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

            $('.slider_master_container')
                。上（{
                        'mouseenter'：函数（）{
                            清除间隔（周期）；
                        },
                        “鼠标离开”：函数（）{
                            周期 = window.setInterval(methods.automate, 1000);
                        }
                });

        },

        自动化：函数（el）{
            var $active = $('.slide.active'),
                $下一个 = 埃尔？$('.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 = 函数（方法）{
        如果（方法[方法]）{
            返回方法[方法].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if ( typeof method === 'object' || ! method ) {
            返回方法.init.apply（这个，参数）；
        } 别的 {
            $.error( '方法 ' + 方法 + ' 在 jQuery.smartSlider 上不存在' );
        }
    };

})( jQuery );
4

0 回答 0