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

2022-04-17 00:00:00 javascript slideshow

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

<body>
<img src="1.jpg">
</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="1.jpg" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></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>

相关文章