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

这与旋转角度设置得高以及正或负有关。达到6时，您有一个大的旋转角度，然后回到“ 7”，它将为您的角度计算一个很大的旋转值。听起来您想要的是看到哪个旋转角度最接近（向前或向后）并朝那个方向旋转。这样，它就不会总是从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+度）。因此，我们检查并绕圆向另一个方向移动。

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

1 个答案: