如何将jQuery实现的淡入淡出轮播函数改写为原生JavaScript

前置基础样式 #

你需要先补充以下CSS样式，替代jQuery内置的fade动画效果，性能更稳定：

/* 轮播容器基础样式，可根据实际业务调整宽高 */
.fadein {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.fadein img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

等价功能实现代码 #

// 获取轮播容器和所有图片元素
const fadeContainer = document.querySelector('.fadein');
const allImgs = fadeContainer.querySelectorAll('img');

// 初始隐藏除第一张外的所有图片，和原jQuery :gt(0) hide逻辑完全对齐
allImgs.forEach((img, idx) => {
  if (idx > 0) img.style.opacity = '0';
});

// 定时轮播逻辑，间隔和原代码一致为240000毫秒（4分钟）
setInterval(() => {
  const currentFirstImg = fadeContainer.querySelector('img:first-child');
  const nextShowImg = currentFirstImg.nextElementSibling;

  // 当前第一张图片执行2000毫秒淡出，对应原fadeOut(2000)
  currentFirstImg.style.transition = 'opacity 2s ease';
  currentFirstImg.style.opacity = '0';

  // 下一张图片延迟1000毫秒后执行1000毫秒淡入，和原动画时序完全对齐
  setTimeout(() => {
    nextShowImg.style.transition = 'opacity 1s ease';
    nextShowImg.style.opacity = '1';
  }, 1000);

  // 淡出动画完成后把当前第一张图片移到容器末尾，对应原appendTo逻辑实现循环
  setTimeout(() => {
    fadeContainer.appendChild(currentFirstImg);
  }, 2000);
}, 240000);

逻辑对齐说明 #

• 初始状态完全和原jQuery逻辑一致：仅展示容器内第一张图片，其余图片隐藏
• 动画时序完全匹配：当前展示图2秒淡出，下一张图1秒淡入，两段动画有1秒重叠
• 循环逻辑等价：动画完成后将已淡出的图片移动到容器末尾，实现无限轮播

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