Question

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

<body>
<img src="1.jpg">
</body>

当访问者鼠标悬停在图像上时，图像将变为2.jpg，3.jpg和....将停止在5.jpg.Slideshow与gif图像类似。
请问如何写javascript或jquery 请告诉我最简单的方法。
谢谢亲爱的朋友我在这个网站上找到了simalor的问题。但是我找不到完整的答案如果这个问题是重复的，那么抱歉请原谅我英语用法不佳。

Answer 1

您可以使用jQuery的悬停事件并传递onenter和onout方法。在输入时，您可以调用并设置间隔以增加图像的数量，并且在您想要通过清除间隔来停止它时。

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

当鼠标悬停在图像幻灯片上时，将以gif图像开始

1 个答案: