悬停时的 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 continuous animation on mouseover

将用于： http://ListAndPlay.com

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

Answer 1

试试这个 (demo)...我还提取了对 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>

---

更新：要为每个图像设置可变数量的拇指，我updated the demo 也允许您添加包含文件名的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 与“src”属性中使用的根 (http://i.ytimg.com/vi/qrO4YZeyl0I/) 相同时才有效，因为代码正在修改当前显示的 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

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

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