修改自Codepen的旋转横幅JS的上下页按钮点击失效问题

存在的核心问题 #

• 按钮样式设置了visibility: hidden，元素不可交互，点击事件无法触发
• 上一页按钮状态跳转逻辑错误，和正向轮播逻辑一致，没有实现向前切换
• 下一页按钮没有手动更新轮播状态，调用轮播方法后逻辑冲突
• 动画重复触发机制缺失，同一动画名第二次赋值不会重新执行
• 轮播定时器重复创建，会出现多定时器同时运行导致逻辑混乱
• 延迟动画任务没有做防冲突处理，多次点击会触发多个延迟任务

修复代码 #

CSS修改（仅修改按钮相关样式） #

.prev-accessory {
    opacity: 0; /* 替换原有visibility: hidden，透明但保留交互能力 */
    height: 38.5rem;
    position: absolute;
    margin-top: -4rem;
    width: 14rem;
    margin-left: -4rem;
    z-index: 5;
    cursor: pointer;
}

.next-accessory {
    opacity: 0; /* 替换原有visibility: hidden，透明但保留交互能力 */
    height: 38.5rem;
    position: absolute;
    margin-top: -4rem;
    width: 14rem;
    right: 0;
    margin-right: -4rem;
    z-index: 5;
    cursor: pointer;
}

完整修复后JS代码 #

var bannerStatus = 1;
var bannerTimer = 4000;
var startBannerLoop = null;
var animateTimeout = null;

// 动画重置工具方法，解决重复触发问题
function resetAnimation(elem, animStr) {
  elem.style.animation = 'none';
  void elem.offsetWidth; // 触发浏览器重排，重置动画状态
  elem.style.animation = animStr;
}

window.onload = function() {
  bannerLoop();
  startBannerLoop = setInterval(bannerLoop, bannerTimer);
}

document.getElementById("mobile-accessory").onmouseenter = function() {
  clearInterval(startBannerLoop);
  clearTimeout(animateTimeout);
}

document.getElementById("prev-accessory").onclick = function() {
  // 向前切换状态逻辑
  if (bannerStatus === 1) {
    bannerStatus = 3;
  } else if (bannerStatus === 2) {
    bannerStatus = 1;
  } else if (bannerStatus === 3) {
    bannerStatus = 2;
  }
  clearTimeout(animateTimeout);
  bannerLoop();
}

document.getElementById("next-accessory").onclick = function() {
  // 向后切换状态逻辑
  if (bannerStatus === 1) {
    bannerStatus = 2;
  } else if (bannerStatus === 2) {
    bannerStatus = 3;
  } else if (bannerStatus === 3) {
    bannerStatus = 1;
  }
  clearTimeout(animateTimeout);
  bannerLoop();
}

document.getElementById("mobile-accessory").onmouseleave = function() {
  // 先清除已存在的定时器，避免多实例运行
  clearInterval(startBannerLoop);
  startBannerLoop = setInterval(bannerLoop, bannerTimer);
}

function bannerLoop() {
  const charge = document.getElementById("charge");
  const magnetic = document.getElementById("magnetic");
  const allAtOnce = document.getElementById("all-at-once");
  
  if (bannerStatus === 1) {
      animateTimeout = setTimeout(function() {
        resetAnimation(magnetic, "right-center 1s forwards");
        resetAnimation(allAtOnce, "left-right 1s forwards");
        resetAnimation(charge, "center-left 1s forwards");
        bannerStatus = 2;
      }, 500);
  } else if (bannerStatus === 2) {
      animateTimeout = setTimeout(function() {
        resetAnimation(allAtOnce, "right-center 1s forwards");
        resetAnimation(charge, "left-right 1s forwards");
        resetAnimation(magnetic, "center-left 1s forwards");
        bannerStatus = 3;
      }, 500);
  } else if (bannerStatus === 3) {
      animateTimeout = setTimeout(function() {
        resetAnimation(charge, "right-center 1s forwards");
        resetAnimation(magnetic, "left-right 1s forwards");
        resetAnimation(allAtOnce, "center-left 1s forwards");
        bannerStatus = 1;
      }, 500);
  }
}

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