如何仅用CSS或JS实现div背景按顺序循环播放4个拆分GIF动图

你的需求完全可以实现，之前写的CSS代码效果不符合预期，核心原因是CSS多背景图的渲染逻辑是多层叠加显示，而非按顺序轮播——写在前面的背景图会盖在更底层的图上面，只要第一层GIF不是全透明，后面三层根本不会露出来，自然达不到依次播放的效果。

实现思路说明 #

如果不想引入额外的视频、Canvas方案，纯CSS/JS都能做，但JS方案的稳定性和可维护性远高于纯CSS：

• 纯CSS方案的局限非常明显：必须精准掌握每一个拆分GIF的单遍完整播放时长，靠给每个GIF单独做一个绝对定位的层，用CSS动画控制每个层的显隐时间窗口，整体动画总时长为4个GIF的时长之和。一旦GIF文件调整、时长变化，整个轮播逻辑就会错位，调试成本极高，不推荐日常使用。
• JS方案是目前实现这个需求最实用的选择，不需要复杂的逻辑，核心是控制好背景图切换的时间节点，衔接的时候不会出现卡顿。

可直接复用的JS实现代码 #

先提前准备好每一段GIF的单遍播放时长（可以本地打开每个GIF单独计时获取，单位用毫秒），然后直接在页面里加以下脚本即可：

// 替换为你自己的GIF路径和对应播放时长
const gifPlayList = [
  { path: 'gif1.gif', playDuration: 1200 },
  { path: 'gif2.gif', playDuration: 1800 },
  { path: 'gif3.gif', playDuration: 1500 },
  { path: 'gif4.gif', playDuration: 2000 }
]
const container = document.querySelector('.leftsection')
let currentPlayIndex = 0
let switchTimer = null

// 预加载所有GIF，避免切换时出现白屏等待
gifPlayList.forEach(item => {
  const preloadImg = new Image()
  preloadImg.src = item.path
})

function startPlayLoop() {
  clearTimeout(switchTimer)
  // 切换当前div的背景图，浏览器会自动让该GIF从第一帧开始播放
  const currentItem = gifPlayList[currentPlayIndex]
  container.style.backgroundImage = `url("${currentItem.path}")`
  // 当前GIF播完后自动切到下一段
  switchTimer = setTimeout(() => {
    currentPlayIndex = (currentPlayIndex + 1) % gifPlayList.length
    startPlayLoop()
  }, currentItem.playDuration)
}

// 页面完全加载后自动启动循环播放
window.addEventListener('load', startPlayLoop)

实现注意事项 #

• 每段GIF的playDuration一定要校准准确，哪怕差个几十毫秒，就会出现上一段没播完就切走、或者播完后停帧等待的错位感，影响观感。
• 不需要额外处理GIF的播放起始帧：只要给背景图设置一个新的GIF路径，浏览器会自动重置该GIF的播放进度，从第一帧开始播放，这个是所有现代浏览器的固有行为。
• 你原来写的CSS里的background-size: cover、background-repeat: no-repeat、高度设置都可以保留，只需要把多背景图的配置删掉就行，不然多层叠加的问题还会存在。

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