如何识别div子元素的active类并循环切换实现轮播效果

原生无依赖实现（推荐） #

核心逻辑通过索引定位实现，不受DOM层级微调影响，稳定性更高：

function toggleCarouselActive() {
  // 获取所有轮播项节点，转为数组方便操作
  const carouselItems = Array.from(document.querySelectorAll('.carouselContainer .carouselItem'))
  // 无轮播项时直接返回
  if (carouselItems.length === 0) return
  // 定位当前带active类的元素索引
  const currentActiveIndex = carouselItems.findIndex(item => item.classList.contains('active'))
  // 移除当前元素的active类
  carouselItems[currentActiveIndex].classList.remove('active')
  // 计算下一个元素索引，取模运算实现循环（最后一项的下一项是第一项）
  const nextActiveIndex = (currentActiveIndex + 1) % carouselItems.length
  // 给下一个元素添加active类
  carouselItems[nextActiveIndex].classList.add('active')

  // 可选：如果需要根据当前项的data-showtime动态调整切换间隔，可在此处重置定时器
  // const nextShowTime = Number(carouselItems[nextActiveIndex].dataset.showtime)
}

// 调用示例：固定5秒切换一次
setInterval(toggleCarouselActive, 5000)

基于DOM节点遍历的实现 #

依赖你当前的DOM结构，执行效率更高，适合DOM结构固定不会频繁调整的场景：

function toggleCarouselActiveBySibling() {
  const currentActive = document.querySelector('.carouselItem.active')
  if (!currentActive) return
  // 移除当前激活状态
  currentActive.classList.remove('active')
  // 查找下一个轮播项父节点
  const nextItemParent = currentActive.parentElement.nextElementSibling
  // 存在下一个父节点就取对应子项，否则取第一个轮播项实现循环
  const nextActiveItem = nextItemParent 
    ? nextItemParent.querySelector('.carouselItem')
    : document.querySelector('.carouselContainer .carouselItemDiv:first-child .carouselItem')
  nextActiveItem.classList.add('active')
}

注意事项 #

• 初始化时要保证有且仅有一个carouselItem带有active类，避免逻辑异常
• 如果需要实现点击切换、暂停轮播等功能，只需要在对应交互事件触发时调用上面的切换函数即可

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