如何使用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在鼠标悬停时每秒旋转缩略图，就像许多视频网站一样？

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

- Albano Albanese

Answer 1

您可以按照以下方式进行操作...

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

- Murat Baştaş

---

Murat，谢谢你的回答。但是有一个问题，当我在Firefox中使用检查元素时，图像数量增加了，我看到成千上万张图像而不是4张，所以它会重复。你的解决方案很好，但问题是页面速度，因为太多的图像会对页面速度产生负面影响。谢谢你的回答，我仍在使用你的代码工作。 - Albano Albanese

我在谷歌上找到了另一段代码，因为我是js的新手http://jsfiddle.net/ayNPS/387/，但这个代码只更改相同位置中的图像并将缩略图重命名为1.jpg 2.jpg等，并且仅接受jpg。 - Albano Albanese

@AlbanoAlbanese 这只是一个例子。如果你考虑页面加载速度，你可以像这个fiddle https://jsfiddle.net/47003sar/2/一样用其他图片来更改src属性。 - Murat Baştaş

Answer 2

这里是一个可能的解决方案：

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://istack.dev59.com/BDcMh.gif">
<img height="150" src="https://istack.dev59.com/vfQCT.gif">
<img height="150" src="https://istack.dev59.com/MbEgw.gif">
<img height="150" src="https://istack.dev59.com/uCCEw.gif">
<img height="150" src="https://istack.dev59.com/iO6QE.gif">

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

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

为了制作您在上面的代码片段中看到的GIF，我使用了这个在线工具将Youtube的WEBP图像转换成了GIF：https://ezgif.com/webp-to-gif。

- user1636522

---

太好了，我喜欢它，非常非常感谢 @leaf，它现在也在我的WordPress中起作用 :) - Albano Albanese

嘿@leaf，再次打扰你很抱歉，但我想问一下是否可能使此功能适用于多个项目，就像在此fiddle中https://jsfiddle.net/jhudrp8v/1/一样。因为我正在我的WordPress网站上使用它，当我发布第二篇文章时，我发现所有图像仅替换了一个div，请如果您有时间，我知道这对您来说肯定很容易，但我从今早开始一直在尝试使用不同的jquery选择器：( - Albano Albanese

@AlbanoAlbanese 看看这个：https://jsfiddle.net/jhudrp8v/11/ :-) 诀窍是在jQuery函数中添加第二个参数：$("img", div)。请参阅http://api.jquery.com/jQuery/#jQuery1。 - user1636522

Answer 3

使用类似以下代码的 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>

- CertainPerformance