如何在鼠标悬停时多次更改图像

Question

我试图多次更改图像，所以我使用了 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>

Answer 1

您需要终止间隔：

var Int;

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

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

Answer 2

您应该清除间隔以停止旋转。为了解决这个问题，我建议调用一个外部函数（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>

Answer 3

您可以 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>

Answer 4

您需要使用 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>

Answer 5

您必须使用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>

Answer 6

您必须使用 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>

Answer 7

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

Answer 8

您可以使用带有关键帧的 CSS 动画。看片段。尝试将鼠标移到图像上

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

如何在鼠标悬停时多次更改图像

how to make an image change multiple times onmouseover

html

javascript

onmouseover

setinterval