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>

您可以使用setTimeout替换setInterval。

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>

如何阻止图像库运行onClick？

2 个答案: