javascript - 如何使用javascript更改鼠标悬停时的图像？

Question

<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo">

是否有任何方法可以像许多视频管网站一样使用 javascript 在鼠标悬停时每秒旋转缩略图？

我有一个视频库，我有多个拇指选项，但我不知道是否可以每秒更改上面列出的图像。

Answer 1

这是一个可能的解决方案:

var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img").map(function () {
  return $(this).attr("src");
}).get();

$("img:gt(0)").remove();
$("img").hover(function () {
  var $this = $(this);
  tid = setInterval(function () {
    i = (i + 1) % images.length;
    $this.attr("src", images[i]);
  }, 1000 * sec);
}, function () {
  clearInterval(tid);
  $(this).attr("src", images[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="/image/BDcMh.gif">
<img height="150" src="/image/vfQCT.gif">
<img height="150" src="/image/MbEgw.gif">
<img height="150" src="/image/uCCEw.gif">
<img height="150" src="/image/iO6QE.gif">

作为替代方案，您可以在静态 GIF 和动画 GIF 之间切换:

var gif = "/image/1IpaB.gif";
var agif = "/image/yYrPT.gif";

$("img").hover(function () {
  $(this).attr("src", agif);
}, function () {
  $(this).attr("src", gif);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="/image/1IpaB.gif">

为了制作您可以在上面的代码片段中看到的 GIF，我转换了一个 WEBP image from Youtube感谢这个在线工具:https://ezgif.com/webp-to-gif .