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

Question

我对此遇到了很多麻烦，在不懈努力之后，我决定在这里发布问题。我的老板要我找出他的组织板问题。当用户想要从第6级转移到第7级时，就会出现问题 - 它是逆时针转向第7区的，它一直旋转回到第6师。我了解为什么要这样做，但是我还没有弄清楚如何逆时针向下一个面板逆时针，而没有将其旋转回到第7区。而不是在此处发布大量代码：https：//codepen.io/jamesaluna/pen/gnrwnj。如果您不太确定我要做什么，请问我，谢谢！

我尝试创建一个计算旋转量的" M"变量，但这并没有太多好处。我还将元素放在一个数组中，并使用for/in 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); }

Answer 1

这与您的旋转角度设置的高以及负面或正相关。当您达到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)';

    }

这样，如果您进行的旋转是整个方向的一半以上，则相反。您想要的是不要将旋转超过180度(ESP从6到7，为300摄氏度(，如果有意义(。因此，我们将检查并转向圆圈的另一个方向。