难以使用JavaScript创建无限逆时针旋转木马

我在这方面遇到了不少麻烦，经过不懈的努力，我决定把我的问题发布在这里。我的老板想让我找出他组织董事会的问题。当用户想要从第6部分移动到第7部分时，问题就出现了——它不是逆时针移动到第7部分，而是顺时针旋转到第6部分。我理解它为什么这样做，但我还没有弄明白如何让它逆时针旋转到下一个面板，而不让它一直旋转到第7部分。我有一个代码笔，我想这比在这里发布大量代码要容易。如果你不太确定我到底想做什么，请问我，谢谢

我试着创建一个“m”变量来计算旋转量，但效果不太好。我还使用for/in循环将元素放入一个数组中，并对其进行了一些处理，但我还没有找到使用该循环的解决方案

var carousel = document.querySelector('.carousel');
    var cellCount = 7;
    var selectedIndex = 1;
    function rotateCarousel() {
      var angle = selectedIndex / cellCount * -360;
      carousel.style.transform = 'translateZ(-898px) rotateY(' + angle + 'deg)';


    }

    rotateCarousel();
    var sevenButton = document.querySelector('.seven-button');
    sevenButton.addEventListener( 'click', function() {
        var m =  Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 1;
      if (selectedIndex == 7) {
        selectedIndex = 1 ;
      }
      rotateCarousel();
        document.getElementById("demo").innerHTML = m;
        document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var oneButton = document.querySelector('.one-button');
    oneButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 2;
      rotateCarousel();
     document.getElementById("demo").innerHTML = m;
     document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var twoButton = document.querySelector('.two-button');
    twoButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 3;
      rotateCarousel();
     document.getElementById("demo").innerHTML = m;
     document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var threeButton = document.querySelector('.three-button');
    threeButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 4;
      rotateCarousel();
      document.getElementById("demo").innerHTML = m;
      document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var fourButton = document.querySelector('.four-button');
    fourButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 5;
      rotateCarousel();
     document.getElementById("demo").innerHTML = m;
     document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var fiveButton = document.querySelector('.five-button');
    fiveButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 6;
      rotateCarousel();
     document.getElementById("demo").innerHTML = m;
     document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var sixButton = document.querySelector('.six-button');
    sixButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 7;
      rotateCarousel();
      if (selectedIndex == 7) {
        selectedIndex = 6 ;
      }
      document.getElementById("demo").innerHTML = m;
      document.getElementById("demo2").innerHTML = selectedIndex;
    }); 

``` CSS

.carousel__cell:nth-child(7n+3) { background: hsla( 360, 100%, 100%, 1); border: 2px solid #B754F7;} 
.carousel__cell:nth-child(7n+4) { background: hsla( 360, 100%, 100%, 1);border: 2px solid #FF91FF; }
.carousel__cell:nth-child(7n+5) { background: hsla( 360, 100%, 100%, 1);border: 2px solid #009C00; }
.carousel__cell:nth-child(7n+6) { background: hsla( 360, 100%, 100%, 1);border: 2px solid #999; }
.carousel__cell:nth-child(7n+7) { background: hsla( 360, 100%, 100%, 1);border: 2px solid #FFED8A;  }
.carousel__cell:nth-child(7n+1) { background: hsla( 360, 100%, 100%, 1); border: 2px solid #3A43F9; }
.carousel__cell:nth-child(7n+2) { background: hsla( 360, 100%, 100%, 1);  border: 2px solid #F4D100; }


.carousel__cell:nth-child(7) { transform: rotateY(  0deg) translateZ(1030px); }
.carousel__cell:nth-child(1) { transform: rotateY( 51.428deg) translateZ(1030px); }
.carousel__cell:nth-child(2) { transform: rotateY(102.856deg) translateZ(1030px); }
.carousel__cell:nth-child(3) { transform: rotateY(154.284deg) translateZ(1030px); }
.carousel__cell:nth-child(4) { transform: rotateY(205.712deg) translateZ(1030px); }
.carousel__cell:nth-child(5) { transform: rotateY(257.14deg) translateZ(1030px); }
.carousel__cell:nth-child(6) { transform: rotateY(308.568deg) translateZ(1030px); }

---

它与旋转角度的设置高度以及旋转角度是负值还是正值有关。当你达到6，你有一个高角度的旋转，然后返回到7，它会为你的角度计算一个重旋转值。听起来你想要的是看哪个旋转角度最近（向前或向后），然后朝那个方向走。这样，它不会总是从6向后移动到7，而是在角度更近时向前移动（而不是索引）

为此，请使用如下条件修改旋转函数：

function rotateCarousel() {
      var angle = selectedIndex / cellCount * -360;

    if (angle < -180)
      angle = angle % 360;

      carousel.style.transform = 'translateZ(-898px) rotateY(' + angle + 'deg)';


    }

函数rotateCarousel（）{
变量角度=所选索引/单元格计数*-360；
如果（角度<-180）
角度=角度%360；
carousel.style.transform='translateZ（-898px）rotateY（'+角度+'deg'）；
}

---

这样，如果旋转方向超过全方向的一半，则旋转方向相反。如果有意义，您希望旋转角度不超过180度（特别是从6度到7度，即300+度）。因此，我们检查并绕圆旋转另一个方向。

（1）在代码笔中，为什么分区7位于分区1的左侧？（2）当用户从分区7移动到分区1时，您希望发生什么？这是我老板的选择，我真的不知道。他告诉我，只要将分区7视为分区1，当它从分区7移动到分区1时，它应该像现在一样逆时针旋转。问题是当您在分区6时，您正试图腐烂ate回到7区——它会一直顺时针旋转。他希望它继续逆时针旋转好的，我们明白了。你希望旋转木马不断逆时针旋转。明白了。有人会尽我们所能来处理这个问题。这也会影响从6到1，这样它会切换到一个更短的旋转，而不是一个更大的旋转I’回到1级。非常感谢您提供的这个解决方案，它可以无缝地从6级过渡到7级，我这里唯一的问题是它可以使5级到6级的转换顺时针进行。我会玩一下，但非常感谢您的帮助