扩展jQuery文本轮换器rotaterator以支持多实例运行

当然可以实现多个文本轮换实例同时运行！你的原代码问题出在递归调用插件本身的逻辑上，导致多个实例的状态互相干扰，没办法独立运行。下面是调整后的完整解决方案：

修改后的代码 #

HTML 示例（多个轮换容器） #

<!-- 第一个轮换实例 -->
<div id="rotate" class="rotater-box">
  <p>语句A</p>
  <p>语句B</p>
  <p>语句C</p>
</div>

<!-- 第二个轮换实例 -->
<div id="rotate-2" class="rotater-box">
  <p>内容X</p>
  <p>内容Y</p>
  <p>内容Z</p>
</div>

JavaScript 调整后的插件代码 #

(function($){ 
  $.fn.extend({ 
    rotaterator: function(options) { 
      var defaults = { 
        fadeSpeed: 500, 
        pauseSpeed: 2000 
      }; 
      var options = $.extend(defaults, options); 

      return this.each(function() { 
        var $container = $(this);
        var $items = $container.children();
        // 初始化：隐藏所有子元素
        $items.hide();

        // 定义内部递归函数，每个实例独立维护轮换逻辑
        function rotate(currentItem) {
          currentItem.fadeIn(options.fadeSpeed, function() {
            currentItem.delay(options.pauseSpeed).fadeOut(options.fadeSpeed, function() {
              var nextItem = currentItem.next();
              // 如果是最后一个元素，回到第一个
              nextItem = nextItem.length ? nextItem : $items.first();
              rotate(nextItem);
            });
          });
        }

        // 启动第一个元素的轮换
        rotate($items.first());
      }); 
    } 
  }); 
})(jQuery);

// 初始化多个实例，支持独立配置
$(document).ready(function() { 
  $('#rotate').rotaterator({fadeSpeed:200, pauseSpeed:3000});
  $('#rotate-2').rotaterator({fadeSpeed:400, pauseSpeed:2500});
});

关键改动说明 #

• 移除递归调用插件本身：原代码每次轮换结束时重新调用rotaterator方法，导致实例状态混乱。现在用内部的rotate递归函数，每个容器实例独立运行自己的轮换逻辑。
• 隔离实例元素范围：所有元素操作都基于当前容器$container，确保不会影响其他轮换实例的元素。
• 简化初始化逻辑：直接用$items.hide()替代原有的循环隐藏代码，更简洁高效。
• 支持独立配置：每个实例可以设置不同的淡入速度和停留时间，完全互不干扰。

现在你可以在页面中添加任意多个带有轮换文本的容器，调用rotaterator方法后它们都会独立运行啦！

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