Javascript 如何阻止图像库运行onClick?
我有一个网站,有一个图像库,每隔几秒钟使用JavaScript更改图像;但是,我想知道当用户单击其中一个图像时,如何阻止图像更改 到目前为止,图像正在按计划旋转,但我似乎无法让“onClick”脚本在用户单击图像时停止旋转。我不需要有一个提醒弹出窗口或需要它做任何事情,我只需要它停止图像旋转时,有人点击其中一张图片 以下是我的HTML代码:Javascript 如何阻止图像库运行onClick?,javascript,image,xhtml,gallery,Javascript,Image,Xhtml,Gallery,我有一个网站,有一个图像库,每隔几秒钟使用JavaScript更改图像;但是,我想知道当用户单击其中一个图像时,如何阻止图像更改 到目前为止,图像正在按计划旋转,但我似乎无法让“onClick”脚本在用户单击图像时停止旋转。我不需要有一个提醒弹出窗口或需要它做任何事情,我只需要它停止图像旋转时,有人点击其中一张图片 以下是我的HTML代码: else (getValue=='STOP') { alert("STOPPED"); } 那不会做你想让它做的事。应该是: else if (
else (getValue=='STOP')
{
alert("STOPPED");
}
那不会做你想让它做的事。应该是:
else if (getValue=='STOP')
{
alert("STOPPED");
}
首先,您在代码的一行中漏掉了关键字“IF” 但是,创建可终止重复动作的方法是设置间隔,然后使用clearInterval终止重复
semaphore = setInterval(somefunction, someinterval);
clearInterval(semaphore);
示例(我即兴写了这篇文章,因此可能会有一些错误,但您应该明白):
但是您需要使用clearTimeout来停止它:
clearTimeout(turn);
但是如果使用setTimeout,则需要为下一个图像显示设置超时,因此甚至不需要清除超时来停止旋转
<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>
setTimeout(函数(){imgTurn()},5000);
var images=function2createimgaray();
var-imageN=0;
var-turn=1;
功能选择img(img){
匝数=0;
function2DisplayImg(imageN);//或执行任何操作
}
函数imgTurn(){
如果(圈数==0)返回;
如果(imageN++>=images.length)imageN=0;
函数2显示img(imageN++);
}
我认为我们应该使用setInterval进行重复,因为我们应该推动javascript引擎执行尽可能多的逻辑和测试,因为javascript引擎比JIT编译的javascript资源效率更高。感谢您的响应。但是我如何将我的原始图像源代码的一部分集成到您创建的内容中呢?我将图像名称简化为增加1个整数,但实际上,我编写代码的方式与我在原始问题中的方式相同,因为我必须指向外部图像源,并且每个图像都有其唯一的名称。有什么建议吗?非常感谢。
clearTimeout(turn);
<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>