如何用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="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">

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

var gif = "https://i.stack.imgur.com/1IpaB.gif";
var agif = "https://i.stack.imgur.com/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="https://i.stack.imgur.com/1IpaB.gif">

为了制作你在上面的代码片段中可以看到的GIF，我已经转换了一个WEBP image from Youtube，这要归功于这个在线工具：https://ezgif.com/webp-to-gif。

Answer 2

你可以这样做......

<style type="text/css">
  .mvThumbs {
    position: relative;
  }
  .mvThumbs .mvThumb {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>

<div class="mvThumbs">
  <img src="http://lorempixel.com/400/200/sports/1/" class="mvThumb" alt="" title="" id="thumb_i84bdg">
  <img src="http://lorempixel.com/400/200/sports/2/" class="mvThumb" alt="" title="" id="thumb_i84xjz">
  <img src="http://lorempixel.com/400/200/sports/3/" class="mvThumb" alt="" title="" id="thumb_i84yrh">
</div>

<script type="text/javascript">
  $('.mvThumbs img:gt(0)').hide();
  $(".mvThumbs").hover(function() {
    window.timer = setInterval(function() {
      $('.mvThumbs :first-child').fadeOut().next('img').fadeIn().end().appendTo('.mvThumbs');
    }, 1000);
  }, function() {
    clearInterval(window.timer);
  });
</script>

Answer 3

使用在mouseenter上添加并在mouseleave上清除的setInterval，如下所示：

let hoverInterval;
let visibleIndex = 0;
const container = document.querySelector('#container');
container.addEventListener('mouseover', () => {
  hoverInterval = setInterval(() => {
    container.children[visibleIndex].style.display = 'none';
    visibleIndex++;
    container.children[visibleIndex].style.display = 'block';
  }, 1000);
});
container.addEventListener('mouseleave', () => clearInterval(hoverInterval));

<div id="container">
<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" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo" style="display:none">
</div>