如何实现textRotator文本轮播器鼠标悬停暂停功能？

现有textRotator文本轮播器，需要添加鼠标悬停暂停功能，仅能进行简单代码实现，求修改指导或替代脚本。

一、修改现有脚本实现悬停暂停 #

关键修改逻辑： #

给轮播容器绑定鼠标悬停/离开事件，同时将原有的delay延迟替换为可手动控制的定时器，实现悬停时暂停计时、离开时恢复轮播的效果。

修改后的完整script.js代码： #

(function($) {
    $.textRotator = function(element, options) {
        var defaults = {
            random : false,
            fadeIn : 1000,
            fadeOut : 500,
            duration : 5000, 
            easingin : 'swing',
            easingout : 'swing'
        }
        var plugin = this;
        plugin.settings = {}
        plugin.globals = {
            child_select : 1,
            $child_select : null,
            timer: null // 新增：存储定时器实例，用于控制轮播延迟
        }
        var $element = $(element), element = element;    /* reference to the actual DOM element*/
        // 初始化方法
        plugin.init = function() {
            plugin.settings = $.extend({}, defaults, options);
            if (plugin.settings.random){ plugin._shuffle($element.children());  }
            plugin.globals.$child_select = $element.find('li:nth-child('+ plugin.globals.child_select+')');
            
            // 新增：绑定鼠标悬停/离开事件
            $element.on('mouseenter', function() {
                // 悬停时清除定时器，暂停轮播
                if (plugin.globals.timer) {
                    clearTimeout(plugin.globals.timer);
                    plugin.globals.timer = null;
                }
            }).on('mouseleave', function() {
                // 离开时重新启动当前项的淡出计时
                if (!plugin.globals.timer && $element.find('li').length > 1) {
                    plugin._startFadeOut();
                }
            });
            
            plugin._fadeIn();
        }
        // 淡入逻辑
        plugin._fadeIn = function() {           
            plugin.globals.$child_select.fadeIn({
                    duration : plugin.settings.fadeIn,
                    easing: plugin.globals.$child_select.data('easingin') ? plugin.globals.$child_select.data('easingin') : plugin.settings.easingin,
                    complete: function () {
                        if ($element.find('li').length > 1) {plugin._startFadeOut(); }                       
                    }               
                });      
        }
        // 随机排序逻辑
        plugin._shuffle = function($el) {
            var allElems = $el.get(),
                getRandom = function(max) { return Math.floor(Math.random() * max); },
                shuffled = $.map(allElems, function(){
                    var random = getRandom(allElems.length),
                        randEl = $(allElems[random]).clone(true)[0];
                    allElems.splice(random, 1);
                    return randEl;
               });   
            $el.each(function(i){$(this).replaceWith($(shuffled[i]));});
        }
        
        // 新增：拆分原淡出逻辑的计时部分，单独作为启动方法
        plugin._startFadeOut = function() {
            var sliedDuration = plugin.globals.$child_select.data('duration') ? plugin.globals.$child_select.data('duration') : plugin.settings.duration;
            plugin.globals.timer = setTimeout(function() {
                plugin._fadeOut();
            }, sliedDuration);
        }
        
        // 淡出逻辑
        plugin._fadeOut = function() {
            plugin.globals.$child_select.fadeOut({
                duration : plugin.settings.fadeOut,
                easing: plugin.globals.$child_select.data('easingout') ? plugin.globals.$child_select.data('easingout') : plugin.settings.easingout,
                complete: function () {
                    plugin.globals.timer = null; // 清除定时器标记
                    if  ((plugin.globals.$child_select.index() + 1) == $element.children().length){
                        plugin.globals.$child_select = $element.children().first();                                                 
                    }
                    else {
                        plugin.globals.$child_select = plugin.globals.$child_select.next('li');                             
                    }
                    plugin._fadeIn();                       
                }               
            });                 
        }
        plugin.init();
    }
    // 注册jQuery插件
    $.fn.textRotator = function(options) {
        return this.each(function() {
            if (undefined == $(this).data('textRotator')) {
                var plugin = new $.textRotator(this, options);
                $(this).data('textRotator', plugin);
            }
        });
    }

})(jQuery);

操作方式： #

直接将原script.js的代码替换为上述版本即可，style.css和site.htm无需修改。

二、替代方案（现成脚本推荐） #

如果不想修改现有代码，可选择以下成熟的jQuery轮播插件，原生支持随机显示+鼠标悬停暂停功能，配置简单易上手：

• Slick：功能全面，支持随机排序、自动播放、悬停暂停，还能自定义动画效果
• Owl Carousel：轻量灵活，响应式设计，自带多种轮播模式，可一键开启悬停暂停
• bxSlider：专注轮播效果，代码简洁，支持随机切换和自动播放暂停

内容的提问来源于stack exchange，提问作者TRG