[英]Changing the image in an onmouseover event and setting a break / interval for each one
I need to change the image on an onmouseover
event but how to set a break / interval for every image - here is my code so far: 我需要在
onmouseover
事件上更改图像,但是如何为每个图像设置间隔/间隔-到目前为止,这是我的代码:
<script>
function slide()
{
var islide=new Array("a.jpg","b.jpg","c.jpg");
var i;
for(i=0;i<islide.length;i++)
{
document.getElementById("slider").src= islide[i];
}
}
</script>
<img src="c.jpg" onmouseover="slide()" id="slider"/>
您将要在slide函数中使用window.setTimeout()
函数,而不是for循环,因为后者要尽可能快地运行。
This will work: 这将起作用:
you can specify the speed :" islide_intervall "(ms 1000 = 1sec.) 您可以指定速度:“ islide_intervall”(毫秒1000 = 1秒。)
<script>
var islide=new Array("a.jpg","b.jpg","c.jpg");
var islide_i = 0;
var islide_intervall = 2000;
var islide_timeout = null;
function slide(){
var i = islide_i;
if(i>=islide.length || i<0){islide_i=0;}
islide_timeout = setTimeout(function(){
var img = document.getElementById("slider");
img.src = islide[islide_i];
img.alt = islide[islide_i++];
slide();
}, islide_intervall);
}
function stop_slide(){
if(islide_timeout){clearTimeout(islide_timeout)}
islide_timeout = null;
}
</script>
<img src="c.jpg" id="slider" alt=""/>
<button type="button" onclick="slide()">Start</button>
<button type="button" onclick="stop_slide()">Stop</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.