画像変更を行うためにどのように複数回のonmouseover

私は複数回私はsetIntervalを使用した画像の変更を行うためにしようとしているが、それは停止しません画像変更を行うためにどのように複数回のonmouseover

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>

出典

2017-01-03 Joe Zak

の上にマウスを移動しようとするあなたは、マウスの 'てclearInterval（）を使用して間隔を'クリアする必要があります。そしてそれをデフォルト画像に設定します。 – karan3112

使用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>

出典

2017-01-03 13:34:55 G0dsquad

間隔を削除する必要があります。

var Int; 

function start(){ 
    Int=setInterval(yourfunc,1000); 
} 

function stop(){ 
    if(Int){ 
     clearInterval(Int); 
     Int=null; 
    } 
}

出典

2017-01-03 13:30:09

回転を停止する間隔をクリアする必要があります。これにアプローチするために、外部関数を呼び出すことを提案します（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>

出典

2017-01-03 13:30:57

あなたはsetInterval() ONMOUSEOUTをclearIntervalすることができます。

このようなことをします。あなたがて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="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>

出典

2017-01-03 13:32:19

。 clearInterval setIntervalから返されたIDを使用してsetIntervalをキャンセルします。

ここでは、clearIntervalについて詳しく読むことができます。

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval

あなたは使用してそれを行うことができます。あなたがたsetIntervalイベントをクリアするために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>

出典

2017-01-03 13:32:55 Deep

。ここに例があります。

<!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>

出典

2017-01-03 13:33:38 Nitheesh

setInterval通話ごとNミリ秒を繰り返すことになりますので、あなたは、一度だけの関数を呼び出すためにsetTimeoutを使用する必要があります。また、インスタントコールを行い、しばらくしてからもう一度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>

出典

2017-01-03 13:34:22 Justinas

これは明らかに間違っています。 'setInterval'は特定の間隔で起動し、' setTimeout'は一度起動します。これは、誰かがonmouseoverを複数回起動するオブジェクト上でマウスを動かし続けるためにのみ機能します。 'setInterval'を強制終了するほうが正しいでしょう。 – Mouser

あなただけのキーフレームと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>

出典

2017-01-03 13:44:18 Banzay

良い代替回答。 – G0dsquad

画像変更を行うためにどのように複数回のonmouseover

答えて

関連する問題