如何让JavaScript旋转木马工作？_Javascript_Html_Carousel

如何让JavaScript旋转木马工作？

javascript html

如何让JavaScript旋转木马工作？,javascript,html,carousel,Javascript,Html,Carousel,我的旋转木马坏了。就我所知，代码是正确的，也许你能看到问题所在？这是密码 <!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-U

我的旋转木马坏了。就我所知，代码是正确的，也许你能看到问题所在？这是密码

<!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>


兰迪的网页
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

细胞


以前的
下一个

方向：
水平的
垂直的

var nextButton=document.querySelector（“.next按钮”）；
aaddEventListener（“单击”，函数（）{
选择dex++；
rotateCarousel（）；
});
var cellsRange=document.querySelector（“.cells-range”）；
cellsRange.addEventListener（“变更”，变更转盘）；
cellsRange.addEventListener（“输入”，更改转盘）；
函数更改转盘（）{
cellCount=cellsRange.value；
θ=360/细胞计数；
var cellSize=水平？cellWidth：cellHeight；
半径=数学圆（cellSize/2/Math.tan（Math.PI/cellCount））；
对于（变量i=0；i


html和css工作，我不能让图片循环或改变单元格的数量。因此，由于某种原因，所有javascript都无法正常工作。
它一直在说添加更多细节，尽管我已经有了
 您的一个事件侦听器中有一个额外的a

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

到
你说你不能让它工作是什么意思？你能说得更具体一点吗？所以看起来一切正常，所以我知道css和html都在工作，但是javascript什么都不做。。。就像当我点击下一个图像按钮时，它什么也不做，当我点击水平或垂直选项时，它什么也不做……我正在学习Javascript。我在codepen上找到了这个，并试图重新创建它。
nextButton.addEventListener( 'click', function() {
  selectedIndex++;
  rotateCarousel();
});