javascript - 如何阻止图片库运行 onClick？

Question

我有一个网站，它有一个图片库，每隔几秒就会使用 JavaScript 更改一次图片；但是，我想知道当用户单击其中一个图像时如何阻止图像发生变化。

到目前为止，图像正在按计划旋转，但是当用户单击图像时，我似乎无法让“onClick”脚本停止旋转。我不需要弹出警报或需要它做任何事情，我只需要它在有人单击其中一张图片时停止图像旋转。

这是我拥有的 HTML 代码：

Answer 1

else (getValue=='STOP')
{
    alert("STOPPED");

}

这不会做你可能希望它做的事情。它应该是：

else if (getValue=='STOP')
{
    alert("STOPPED");

}

Answer 2

首先，您在其中一行代码中错过了关键字“IF”。

但是，创建可终止的重复动作的方法是 setInterval ，然后使用 clearInterval 终止重复。

semaphore = setInterval(somefunction, someinterval);
clearInterval(semaphore);

示例（我即兴写了这个，所以可能会有一些错误，但你明白了）：

<img src="./images/image1.jpg" id="imageGallery" name="imageGallery"
 onclick="chooseImg(this)" />

<script>

var turn = setInterval(function(){imgTurn()},5000);
var images = function2CreateImgArray();
var imageN = 0;

function chooseImg(img){
  clearInterval(turn);
  function2DisplayImg(imageN); // or do whatever
}

function imgTurn(){
   if (imageN++ >= images.length) imageN = 0;
   function2DisplayImg(imageN++);
}

</script>

您可以将 setInterval 替换为 setTimeout。

var turn = setTimeout(function(){imgTurn()},5000);

但是你需要使用 clearTimeout 来停止它：

clearTimeout(turn);

但是如果你使用 setTimeout，你需要 setTimeout 来显示下一个图像，所以你甚至不需要 clearTimeout 来停止旋转。

<img src="./images/image1.jpg" id="imageGallery" name="imageGallery"
 onclick="chooseImg(this)" />

<script>

setTimeout(function(){imgTurn()},5000);
var images = function2CreateImgArray();
var imageN = 0;
var turn = 1;

function chooseImg(img){
  turn = 0;
  function2DisplayImg(imageN); // or do whatever
}

function imgTurn(){
   if (turn==0) return;
   if (imageN++ >= images.length) imageN = 0;
   function2DisplayImg(imageN++);
}

</script>