在onmouseover事件中更改图像，并为每个事件设置中断/间隔

Changing the image in an onmouseover event and setting a break / interval for each one

本文关键字：事件 设置 间隔 中断 onmouseover 图像      更新时间：2023-09-26

我需要更改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"/>

您将希望在幻灯片函数中使用window.setTimeout()函数，而不是运行尽可能快的for循环。

这将起作用：

您可以指定速度："islide_intervall"（ms 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>
相关文章：