如何实现窗口Resize时重新运行指定jQuery轮播插件？

我明白你遇到的问题了——初始加载时所有元素会先显示，而且窗口 resize 时轮播逻辑不能正确重置。咱们来一步步修复这些问题：

问题分析 #

原代码的核心问题有几个：

• 初始加载时没有先统一隐藏元素，导致出现“闪屏”显示所有li的情况
• resize时没有清除之前的轮播动画队列，多次调用插件会导致动画冲突
• 选择器逻辑不够清晰，比如obj2的定义和使用有混淆

修复后的完整代码 #

首先，我们需要封装防抖函数来避免resize频繁触发，同时重构轮播插件的逻辑：

// 防抖函数，避免resize频繁触发
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

(function ($){ 
  $.fn.extend({ 
    rotaterator: function(options) { 
      const defaults = { 
        fadeSpeed: 500, 
        pauseSpeed: 100, 
        child: null 
      }; 
      const options = $.extend(defaults, options); 

      return this.each(function() { 
        const o = options;
        const $container = $(this);
        const $allItems = $container.children('li');
        const $firstItem = $allItems.eq(0);
        const $carouselItems = $allItems.slice(1); // 从第二个li开始是轮播元素

        // 先清除所有动画队列，避免冲突
        $allItems.stop(true, true);

        // 根据屏幕尺寸控制第一个元素的显示/隐藏
        if ($(window).width() < 767) {
          $firstItem.hide();
        } else {
          $firstItem.show();
        }

        // 隐藏所有轮播元素，准备开始轮播
        $carouselItems.hide();

        // 确定轮播的起始元素
        let $next;
        if (!o.child) {
          $next = $carouselItems.eq(0);
        } else {
          $next = o.child;
        }

        // 轮播逻辑
        function startCarousel(currentItem) {
          currentItem.fadeIn(o.fadeSpeed, function() {
            $(this).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
              let $nextItem = $(this).next('li');
              // 如果到了最后一个轮播元素，回到第一个轮播元素
              if (!$nextItem.length || $nextItem.is($firstItem)) {
                $nextItem = $carouselItems.eq(0);
              }
              startCarousel($nextItem);
            });
          });
        }

        // 启动轮播
        startCarousel($next);
      }); 
    } 
  }); 
})(jQuery);

// 初始化和resize监听
(function ($) {
  function initCarousel() {
    $('ul').rotaterator({fadeSpeed:5000, pauseSpeed:1000});
  }

  // 初始加载时执行
  initCarousel();

  // 监听窗口resize，使用防抖避免频繁触发
  $(window).on('resize', debounce(initCarousel, 250));
})(jQuery);

关键改进点 #

• 防抖函数：设置250ms的延迟，确保窗口停止调整后才重新初始化轮播，提升性能
• 动画队列清除：每次调用插件时用stop(true, true)清除之前的动画，避免多个动画同时运行
• 初始隐藏逻辑：一开始就隐藏所有轮播元素，只根据屏幕尺寸控制第一个元素的显示，解决初始闪屏问题
• 清晰的元素划分：把元素分成第一个固定显示/隐藏的元素和轮播元素，逻辑更清晰
• 轮播边界处理：确保轮播到最后一个元素时，正确回到第一个轮播元素，不会跑到第一个固定元素上

这样修改后，不管是初始加载还是窗口resize，轮播逻辑都会正确工作，不会再出现显示所有元素的异常情况。

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