当鼠标悬停在图像上时，幻灯片将作为gif图像启动-前端问题

when mouse over image slide is start as gif image(当鼠标悬停在图像上时，幻灯片将作为gif图像启动)

本文介绍了当鼠标悬停在图像上时，幻灯片将作为gif图像启动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在同一个文件夹中有5张图片。 1.jpg、2.jpg、3.jpg、4.jpg、5.jpg 我将只在我的网页上显示一张图片。示例

<body>
<img src="MS5qcGc=">
</body>

当访问者将鼠标放在图像上时，图像将更改为2.jpg，3.jpg和...将停止在5.jpg。幻灯片放映类似于gif图像。请告诉我如何编写javascript或jQuery。
请告诉我最简单的方法。
感谢我亲爱的朋友。
我在此网站中找到了类似的问题。但我找不到完整的答案。
如果此问题重复，很抱歉
请原谅我糟糕的英语运用。

推荐答案

可以使用jQuery的悬停事件，传入onenter和onout方法。在Enter时，您可以调用并设置时间间隔以增加映像的编号，而在Out时，您希望通过清除时间间隔来停止它。

<!DOCTYPE html>
<html>
  <head>
    <title>image</title>        
  </head>
  <body>

    <img id="img" src="MS5qcGc=" />

    <script type="text/javascript" src="aHR0cDovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjcuMS9qcXVlcnkubWluLmpz"></script>
    <script type="text/javascript">
      var interval = null;
      function changeImage(){
        var nextNum = parseInt($('#img').attr('src').replace('.jpg',''), 10) + 1;
        // If you want it to repeat back to 1 after 5
        nextNum = nextNum > 5 ? 1 : nextNum;
        $('#img').attr('src', nextNum+'.jpg');
      }

      $('#img').hover(
        function(){
          // Call change Image every 50ms
          interval = setInterval(changeImage, 50);
          changeImage();
        },
        function(){
          // Stop the call
          interval && clearInterval(interval);
        }
      );
    </script>
  </body>
</html>

这篇关于当鼠标悬停在图像上时，幻灯片将作为gif图像启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！