如何反转javascript图像旋转木马的方向？

我有一个默认情况下向右旋转的图像转盘。使用setInterval（）并每隔几秒钟更改一次图像。我创建了两个setInterval函数，一个向右旋转，一个向左旋转

然后我创建了一个html箭头，并添加了一个onclick调用来调用我想要的特定setInterval。问题是当调用新的设置间隔时，以前的设置间隔不会关闭。我试图使用clearInterval，但它不起作用

我的代码如下所示：

const left_arrow = document.querySelector("#arrow");

  var rotateRight = setInterval(()=>{
   // do stuff
}, 3000)
 var rotateLeft = setInterval(()=>{
   // do stuff
}, 3000)

left_arrow.onclick = rotateLeft();
right_arrow.onclick = rotateRight();

---

我基本上希望能够单击箭头，并通过调用不同的setInterval函数使其旋转图像流。我不能使用任何框架。谢谢。

我想clearInterval会在您的场景中发挥作用，可能您的clearInterval时间不对。如果您不确定，请粘贴更多代码

---

其次，

const left_arrow=document.querySelector（“#arrow”）

#arrow元素名为left_arrow，我不知道右箭头的元素id是什么，这可能也是一个问题。

正如@Dominik注释一样，停止原始间隔的解决方案是使用

clearInterval

当您调用

setInterval

时

const left_arrow=document.querySelector（“箭头”）；
设currentInterval=null；
函数rotateRight（）{
返回setInterval（（）=>{
清除间隔（当前间隔）
//做事
}, 3000)
}
函数rotateLeft（）{
返回setInterval（（）=>{
清除间隔（当前间隔）
//做事
}, 3000)
}
left_arrow.onclick=（）=>{currentInterval=rotateLeft（）；}
right_arrow.onclick=（）=>{currentInterval=rotateRight（）；}

，所以你的代码每三秒左右移动一次。这是我的代码，我认为它会起作用

direction = "right"

setInterval(()=>{
   if(direction === "right") {
      //do stuff to rotate right
   } else {
      //do stuff to rotate left
   }
}, 3000)

left_arrow.onclick = () => {
   direction = "left";
};
right_arrow.onclick = () => {
   direction = "right";
};

因此，解释代码在做什么，变量方向存储旋转木马应该移动的方向，setInterval内的代码每3秒运行一次，如果方向正确，则运行一些代码，否则运行其他代码。单击按钮时，它只设置方向