如何阻止图像库运行onClick?

时间:2013-02-10 21:57:43

标签: javascript image xhtml gallery

我的网站有一个图库,可以使用JavaScript每隔几秒更改一次图像;但是,我想知道如何在用户点击其中一个图像时停止更改图像。

到目前为止,图像按计划旋转,但是当用户点击图像时,我似乎无法使用“onClick”脚本来停止旋转。我不需要有一个警告弹出窗口或需要它做任何事情,我只需要它来停止图像旋转时有人点击其中一个图片。

以下是我的HTML代码:

2 个答案:

答案 0 :(得分:1)

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

}

这不会做你可能想做的事情。它应该是:

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

}

答案 1 :(得分:0)

首先,您错过了代码的其中一行中的关键字“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>