实现圆形路径旋转圆环的暂停、Active类分配与中心文字切换需求

没问题！我帮你调整原有的实现，让圆环每转45度就暂停，同时给左上和右下的圆环加高亮，还切换中心文字。咱们直接上代码和思路：

咱们不用CSS的无限动画了，改用jQuery的动画队列来精准控制：每次旋转45度，完成后暂停指定时间，再执行切换active类和中心文字的操作，最后递归调用自己实现循环效果。

HTML #

<div class="container">
  <div class="rotation-wrapper">
    <div class="ring ring-1" data-angle="0"></div>
    <div class="ring ring-2" data-angle="90"></div>
    <div class="ring ring-3" data-angle="180"></div>
    <div class="ring ring-4" data-angle="270"></div>
  </div>
  <div class="center-text">初始文字</div>
</div>

CSS #

.container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.rotation-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  transform-origin: center;
}

.ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid #ccc;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px;
  transition: border-color 0.3s ease;
}

/* 初始定位四个圆环到四个方向 */
.ring-1 { transform: translateX(80px); }
.ring-2 { transform: translateY(80px); }
.ring-3 { transform: translateX(-80px); }
.ring-4 { transform: translateY(-80px); }

.ring.active {
  border-color: #ff4444; /* 高亮样式，可自定义 */
  box-shadow: 0 0 10px rgba(255,68,68,0.6);
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
}

JavaScript（jQuery） #

$(document).ready(function() {
  // 配置参数，可按需调整
  const rotateStep = 45; // 每次旋转角度
  const rotateDuration = 500; // 旋转动画时长（ms）
  const pauseDuration = 1000; // 暂停时长（ms）
  const centerTexts = ["第1段", "第2段", "第3段", "第4段", "第5段", "第6段", "第7段", "第8段"]; // 中心文字数组

  let currentAngle = 0;
  let textIndex = 0;

  function rotateAndPause() {
    // 执行旋转动画
    $('.rotation-wrapper').animate(
      { transform: `rotate(${currentAngle + rotateStep}deg)` },
      rotateDuration,
      'linear',
      function() {
        // 旋转完成后更新角度
        currentAngle += rotateStep;
        // 切换中心文字
        $('.center-text').text(centerTexts[textIndex]);
        textIndex = (textIndex + 1) % centerTexts.length;

        // 更新active类：给当前左上和右下的圆环加高亮
        $('.ring').removeClass('active');
        $('.ring').each(function() {
          const initialAngle = parseInt($(this).data('angle'));
          // 计算圆环当前的绝对角度（相对于页面）
          let absoluteAngle = (initialAngle - currentAngle) % 360;
          if (absoluteAngle < 0) absoluteAngle += 360;
          // 判断是否在左上（90°-180°）或右下（270°-360°）区域
          if ((absoluteAngle >= 90 && absoluteAngle <= 180) || (absoluteAngle >= 270 && absoluteAngle <= 360)) {
            $(this).addClass('active');
          }
        });

        // 暂停后继续下一次旋转
        setTimeout(rotateAndPause, pauseDuration);
      }
    );
  }

  // 启动循环
  rotateAndPause();
});

• 分段旋转控制：用jQuery的animate方法替代CSS无限动画，这样能在每段旋转完成后精准执行回调操作（切换文字、添加active类）。
• active类判断：通过每个圆环的初始角度和当前旋转总角度，计算出圆环的绝对位置，判断是否处于左上或右下区域，确保高亮正确。
• 循环逻辑：用递归调用+setTimeout实现无限循环，每次暂停后自动启动下一次旋转。
• 可自定义参数：旋转角度、动画时长、暂停时长、中心文字都可以通过顶部的配置参数快速调整。

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