我尝试多次更改图片，因此我使用了setInterval，但它并没有停止
HTML ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">
<img onmouseover="setInterval(mouseOver,500)" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
</a>
<script>
function mouseOver()
{
element=document.getElementById("a")
if (element.src.match("pic_bulboff.jpg"))
{
document.getElementById("a").src="8.jpg";
}
else if (element.src.match("8.jpg"))
{
document.getElementById("a").src="6.jpg";
}
else
{
document.getElementById("a").src="1.jpg";
}
}
function mouseOut()
{
document.getElementById("a").src="1.jpg";
}
</script>
</body>
</html>
答案 0 :(得分：1)
使用clearInterval并跟踪初始间隔：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">
<img onmouseover="init()" onmouseout="mouseOut()" id="a" src="http://placecage.com/400/400" style="height: 45vh; width: 23vw;">
</a>
<script>
var interval;
function init() {
interval = setInterval(mouseOver, 500)
}
function mouseOver() {
element = document.getElementById("a")
if (element.src.match("400/400")) {
document.getElementById("a").src = "http://placecage.com/300/300";
} else if (element.src.match("300/300")) {
document.getElementById("a").src = "http://placecage.com/200/200";
} else {
document.getElementById("a").src = "http://placecage.com/500/500";
}
}
function mouseOut() {
document.getElementById("a").src = "http://placecage.com/400/400";
clearInterval(interval)
}
</script>
</body>
</html>
答案 1 :(得分：1)
您可以将CSSS动画与关键帧一起使用。 看看片段。尝试将鼠标移到图像上
.test {
margin: 30px;
width: 200px;
height: 150px;
background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg");
}
@keyframes BG-CHANGE {
0% {
background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg");
}
30% {
background: url("http://lorempixel.com/output/nature-q-c-200-150-7.jpg");
}
60% {
background: url("http://lorempixel.com/output/nature-q-c-200-150-10.jpg");
}
100% {
background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg");
}
}
.test:hover {
animation: BG-CHANGE 6s infinite;
}<div class="test"></div>
答案 2 :(得分：0)
你需要杀死间隔：
var Int;
function start(){
Int=setInterval(yourfunc,1000);
}
function stop(){
if(Int){
clearInterval(Int);
Int=null;
}
}
答案 3 :(得分：0)
您应该清除停止旋转的间隔。为了解决这个问题，我建议调用一个外部函数（Lat的调用onMouseOver）。
当用户输入时，将intervalId保存在另一个变量中。这样，当鼠标移出时，您可以拨打clearInterval。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">
<img onmouseover="onMouseOver()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
</a>
<script>
var interval;
function onMouseOver() {
interval = setInterval(mouseOver,500)
}
function mouseOver()
{
element=document.getElementById("a")
if (element.src.match("pic_bulboff.jpg"))
{
document.getElementById("a").src="8.jpg";
}
else if (element.src.match("8.jpg"))
{
document.getElementById("a").src="6.jpg";
}
else
{
document.getElementById("a").src="1.jpg";
}
}
function mouseOut()
{
document.getElementById("a").src="1.jpg";
clearInterval(interval);
}
</script>
</body>
</html>
答案 4 :(得分：0)
您可以clearInterval setInterval() onMouseOut。
做这样的事情。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">
<img onmouseover="mouseEntered()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
</a>
<script>
var interval;
function mouseEntered() {
interval = setInterval(mouseOver, 500)
}
function mouseOver() {
element = document.getElementById("a")
if (element.src.match("pic_bulboff.jpg")) {
document.getElementById("a").src = "8.jpg";
} else if (element.src.match("8.jpg")) {
document.getElementById("a").src = "6.jpg";
} else {
document.getElementById("a").src = "1.jpg";
}
}
function mouseOut() {
document.getElementById("a").src = "1.jpg";
if(interval)
clearInterval(interval)
}
</script>
</body>
</html>
答案 5 :(得分：0)
您需要使用clearInterval来停止setInterval。 clearInterval使用setInterval返回的id取消setInterval。
在此处阅读有关clearInterval的更多信息。
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval
你可以使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">
<img onmouseover="mouseOver()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
</a>
<script>
var timer;
function change() {
element = document.getElementById("a")
if (element.src.match("pic_bulboff.jpg")) {
document.getElementById("a").src = "8.jpg";
} else if (element.src.match("8.jpg")) {
document.getElementById("a").src = "6.jpg";
} else {
document.getElementById("a").src = "1.jpg";
}
}
function mouseOver() {
timer = setInterval(change, 500)
}
function mouseOut() {
clearInterval(timer);
document.getElementById("a").src = "1.jpg";
}
</script>
</body>
</html>
答案 6 :(得分：0)
您必须使用clearInterval函数来清除setInterval事件。这是一个例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">
<img onmouseover="setIntervalFunction()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
</a>
<script>
var intervalVar = null;
function setIntervalFunction() {
intervalVar = setInterval(mouseOver,500);
}
function mouseOver() {
element = document.getElementById("a")
if (element.src.match("pic_bulboff.jpg")) {
document.getElementById("a").src = "8.jpg";
} else if (element.src.match("8.jpg")) {
document.getElementById("a").src = "6.jpg";
} else {
document.getElementById("a").src = "1.jpg";
}
}
function mouseOut() {
document.getElementById("a").src = "1.jpg";
clearInterval(intervalVar);
}
</script>
</body>
</html>
答案 7 :(得分：0)
您必须使用setTimeout仅调用一次函数，因为setInterval将每 n 毫秒重复调用一次。首先进行即时通话，然后再打电话setTimeout再过一段时间再做一次。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">
<img onmouseover="mouseOver(); setTimeout(mouseOver, 500)" onmouseout="mouseOut()" id="a" src="http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png" style="height: 200px; width: 200px;">
</a>
<script>
function mouseOver() {
element = document.getElementById("a")
if (element.src.match("http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png")) {
document.getElementById("a").src = "http://www.drodd.com/images15/2-9.png";
} else if (element.src.match("http://www.drodd.com/images15/2-9.png")) {
document.getElementById("a").src = "http://pngimg.com/upload/small/number3_PNG14976.png";
} else {
document.getElementById("a").src = "http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png";
}
}
function mouseOut() {
document.getElementById("a").src = "http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png";
}
</script>
</body>
</html>