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

Question

我在这方面遇到了很多麻烦，在不知疲倦地工作之后，我决定只在这里发布我的问题。我的老板要我找出他的组织板的问题。当用户想要从分区 6 移动到分区 7 时，问题就出现了——它不是逆时针移动到分区 7，而是顺时针一直旋转回到分区 6。我明白它为什么这样做，但我还没有想出如何让它逆时针转到下一个面板而不让它一直旋转回到第 7 分区。我有一个 CodePen，认为它会更容易而不是在这里发布大量代码:https://codepen.io/jamesaluna/pen/gNRWNJ .如果您不太确定我要做什么，请问我，谢谢!

我尝试创建一个“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); }

Answer 1

这与您的旋转 Angular 设置多高以及它是负还是正有关。当你达到 6 时，你有一个高旋转 Angular ，然后“返回”到 7，它会为你的 Angular 计算一个重旋转值。听起来您想要的是查看哪个旋转 Angular 最近(向前或向后)并朝那个方向移动。这样它就不会总是从 6 倒退到 7，而是在 ANGLE 更近(而不是索引)时前进。

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

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

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

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


    }

那样的话，如果您进行的旋转超过整个方向的一半，则相反。如果有意义的话，您希望旋转不超过 180 度(尤其是从 6 到 7，即 300+ 度)。所以我们检查并绕着圆圈朝另一个方向走。