如何讓我的 JavaScript 旋轉木馬工作？

Question

我無法讓我的旋轉木馬工作。 據我所知，代碼是正確的，也許您可以看到問題所在？ 這是代碼...

<!DOCTYPE html>
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Randy's Webpage</title>
    <link rel="stylesheet" type="text/css" href="Ani.css">
</head>
<body>

<div class= "scene">
  <div class= "carousel">

    <div class= "cell">1</div>
    <div class= "cell">2</div>
    <div class= "cell">3</div>
    <div class= "cell">4</div>
    <div class= "cell">5</div>
    <div class= "cell">6</div>
    <div class= "cell">7</div>
    <div class= "cell">8</div>
    <div class= "cell">9</div>
    <div class= "cell">10</div>
    <div class= "cell">11</div>
    <div class= "cell">12</div>
    <div class= "cell">13</div>
    <div class= "cell">14</div>
    <div class= "cell">15</div>

  </div>
</div>

<div class= "carousel-options">
  <p>
    <label>
      Cells
      <input class= "cells-range" type= "range" min= "3" max= "15" value= "9" />
    </label>
  </p>
  <p>
    <button class= "previous-button">Previous</button>
    <button class= "next-button">Next</button>
  </p>
   <p class= "pee">Orientation: </p>
      <label>
        <input type= "radio" name= "orientation" value= "horizontal" checked />
        Horizontal
      </label>
      <label>
        <input type= "radio" name= "orientation" value= "vertical" />
        Vertical
        </label>
      </p>
</div>
</body>
</html>


<script>
var nextButton = document.querySelector(".next-button");
nextButton.aaddEventListener("click", function() {
  selectedIndex++;
  rotateCarousel();
});

var cellsRange = document.querySelector(".cells-range");
cellsRange.addEventListener("change", changeCarousel);
cellsRange.addEventListener("input", changeCarousel);

function changeCarousel() {
  cellCount = cellsRange.value;
  theta = 360 / cellCount;
  var cellSize = isHorizontal ? cellWidth : cellHeight;
  radius = Math.round(cellSize / 2 / Math.tan(Math.PI / cellCount));
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    if (i < cellCount) {
      //visible cell
      cell.style.opacity = 1;
      var cellAngle = thetaa * i;
      cell.style.transform =
        rotateFn + ")" + cellAngle + "deg) translateZ(" + radius + "px)";
    } else {
      // hidden cell
      cell.style.opacity = 0;
      cell.style.transform = "none";
    }
  }

  rotateCarousel();
}

var orientationRadios = document.querySelectorAll('input[name="orientation"]');
(function() {
  for (var i = 0; i < orientationRadios.length; i++) {
    var radio = orientationRadios[i];
    radio.addEventListener("change", onOrientationChange);
  }
})();

function onOrientationChange() {
  var checkedRadio = document.querySelector(
    'input[name="orientation"]:checked'
  );
  isHorizontal = checkedRadio.value == "horizontal";
  rotateFn = isHorizontal ? "rotateY" : "rotateX";
  changeCarousel();
}

//set initials
onOrientationChange();
</script>

</body>
</html>

html 和 css 工作，我無法讓圖片循環或改變細胞數量。 因此，由於某種原因，javascript 都沒有工作。 它一直說添加更多細節，即使我已經有了。

Answer 1

您的一個事件偵聽器中有一個額外a

改變：

nextButton.aaddEventListener( 'click', function() {
  selectedIndex++;
  rotateCarousel();
});

至

nextButton.addEventListener( 'click', function() {
  selectedIndex++;
  rotateCarousel();
});

如何讓我的 JavaScript 旋轉木馬工作？

問題描述

1 個解決方案

解決方案1
0 2019-09-27 23:21:09

如何讓我的 JavaScript 旋轉木馬工作？

問題描述

1 個解決方案

解決方案1 0 2019-09-27 23:21:09

解決方案1
0 2019-09-27 23:21:09