弄一个序列图以防自己以后找不见

自己做个代码记录，有需要的可以私聊。

      @click="router.push('/brainPower')">
      <img class="img" src="@/assets/images/ai9.png" alt="">
      <img class="img" src="@/assets/images/ai10.png" alt="">
      <img class="img" src="@/assets/images/ai11.png" alt="">
      <img class="img" src="@/assets/images/ai13.png" alt="">
      <img class="img" src="@/assets/images/ai14.png" alt="">
    </div>
    const container = document.querySelector('.aiComponent');
  const images = container.querySelectorAll('.img');
  const FADE_IN_DELAY = 1000; // 初始加载延迟
  const IMAGE_INTERVAL = 300; // 图片显示间隔
  const CYCLE_INTERVAL = 10000; // 自动循环间隔
  function initImages() {
    images.forEach(img => {
      img.style.opacity = '0';
    });
  }
  function showImagesSequentially() {
    let delay = 0;
    images.forEach((img, index) => {
      setTimeout(() => {
        img.style.opacity = '1';
      }, delay);
      delay += IMAGE_INTERVAL;
    });
  }
  // 防抖函数
  function debounce(func, wait) {
    let timeout;
    return function () {
      clearTimeout(timeout);
      timeout = setTimeout(func, wait);
    };
  }

  // 使用防抖包装 hideAllImages 函数
  const debouncedHideAllImages = debounce(() => {
    images.forEach(img => {
      img.style.opacity = '0';
    });
  }, 300);

  // 定义一个函数名与原函数名一致，方便调用
  function hideAllImages() {
    debouncedHideAllImages();
  }
  function init() {
    initImages();
    container.addEventListener('click', debounce(() => {
      hideAllImages();
      showImagesSequentially();
    }, 300));
    window.addEventListener('load', () => {
      setTimeout(showImagesSequentially, FADE_IN_DELAY);
    });
    // 使用防抖函数包装轮询执行的逻辑
    const debouncedAction = debounce(() => {
      hideAllImages();
      showImagesSequentially();
    }, 300);
    let intervalId = setInterval(debouncedAction, CYCLE_INTERVAL);
    return () => {
      clearInterval(intervalId);
      container.removeEventListener('click');
    };
  }
  const cleanup = init();