悬停时的 JQuery 缩略图 src 旋转器（多个图像）

Question

情况：我们有这个带有缩略图的 DIV，需要在悬停时更改其 src：

<div id="moreVideos">
<span class="mb">
    <a href="#" onclick="javascript:loadAndPlayVideo('qrO4YZeyl0I');return false;" class="ml">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" onclick="javascript:loadAndPlayVideo('niqrrmev4mA');return false;" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>
<span class="mb">
    <a href="#" onclick="javascript:loadAndPlayVideo('qrO4YZeyl0I');return false;" class="ml">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" onclick="javascript:loadAndPlayVideo('niqrrmev4mA');return false;" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>

问题：在缩略图悬停时，我们需要每 2 秒更改一次缩略图 src，从 default.jpg -> 1.jpg-> 2.jpg-> 3.jpg-> default.jpg（当鼠标悬停在拇指上时循环遍历它们，鼠标移开后需要停止并停留在当前图像上）

我尝试过的：来自其他网站的大量示例代码和JQuery 循环插件。尝试使用此解决方案失败： 鼠标悬停时的 jquery 连续动画

将用于： http://ListAndPlay.com

我很好奇你会如何解决这样的问题:)！

Answer 1

试试这个（演示）...我还提取了对 loadAndPlayVideo 的内联调用：

$(document).ready(function(){

 $('a.ml').click(function(){
  loadAndPlayVideo( $(this).find('img').attr('id').replace(/thumb_/,'') );
  return false;
 });

 var timer,
  count = 0,
  cycle = function(el){
    var s = el.attr('src'),
     root = s.substring( 0, s.lastIndexOf('/') + 1 );
    count = (count+1)%4;
    el.attr('src', root + ((count===0) ? 'default' : count) + '.jpg');
 };

 $('.mb img').hover(function(){
   var $this = $(this);
   cycle($this);
   timer = setInterval(function(){ cycle($this); }, 1000);
 }, function(){
   clearInterval(timer);
 });

});

HTML

<!-- changed the "moreVideos" id to class, assuming you'll have more than one block -->
<div class="moreVideos"> 
<span class="mb">
    <a class="ml" href="#">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>
<span class="mb">
    <a class="ml" href="#">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>

---

Update ：为了让每个图像都有不同数量的拇指，我更新了演示 也允许您添加一个 data-thumbs 属性，其中包含文件名（如果所有拇指使用相同的根 url）或每个拇指的完整 url。

<img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" data-thumbs="default.jpg, 1.jpg, http://i.ytimg.com/vi/qrO4YZeyl0I/2.jpg, 3.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">

例如，只有当缩略图“2.jpg”的 url 具有与中使用的相同的根 (http://i.ytimg.com/vi/qrO4YZeyl0I/) 时，上面的图像才有效。 “src”属性，因为代码正在修改当前显示的 url 的 url。对于不同位置的图像，请使用 data-thumbs 属性内每个缩略图的完整 URL。

$(function() {

  $('a.ml').click(function() {
    loadAndPlayVideo($(this).find('img').attr('id').replace(/thumb_/, ''));
    return false;
  });

  var timer;

  function cycle(el) {
    var s = el.attr('src'),
      root = s.substring(0, s.lastIndexOf('/') + 1),
      files = el.attr('data-thumbs').split(/\s*,\s*/),
      count = parseInt(el.attr('data-count'), 10) || 0;
    count = (count + 1) % files.length;
    el.attr({
      'src': files[count].indexOf('http') > -1 ? files[count] : root + files[count],
      'data-count': count
    });
  }

  $('.mb img').hover(function() {
    var $this = $(this);
    cycle($this);
    timer = setInterval(function() {
      cycle($this);
    }, 1000);
  }, function() {
    clearInterval(timer);
  });

});

Answer 2

我讨厌开始一个全新的问题，并且必须复制莫蒂在这个问题中的代码来提问。发布的答案效果很好，我唯一的问题是如何修改它以允许可变数量的缩略图。

显示的示例从 default.jpg 循环 -> 1.jpg-> 2.jpg-> 3.jpg->如果每个缩略图目录中只有四个图像，那么 default.jpg 就非常有用。但是，如果每个图像 src 链接都有不同数量的拇指怎么办？例如，如果第一张图像有 6 个拇指，第二张图像有 8 个拇指，第三张图像有 11 个拇指，该怎么办？让代码不关心图像目录中有多少个拇指，因此无论拇指的数量有多少，它都会循环遍历所有图像，其秘诀是什么？