悬停时的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秒钟从default.jpg - > 1.jpg - > 2.jpg - > 3.jpg - > default.jpg更改缩略图src(当鼠标悬停在拇指上时循环显示它们鼠标移出后需要停止并保持当前图像)

我尝试过的:来自其他网站和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>

更新:为了使每个图像具有可变数量的拇指,我更新了演示,也允许您添加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"属性中使用的root()相同的情况下才有效,因为代码正在修改当前显示的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);
  });

});