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更改缩略图src - ＆gt; 1.jpg - ＆gt; 2.jpg - ＆gt; 3.jpg - ＆gt; 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属性（如果所有拇指都有）使用相同的根网址，或每个拇指的完整网址。

<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/）时才有效，因为代码正在修改目前显示的网址。对于不同位置的图像，请使用data-thumbs属性中每个拇指的完整网址。

$(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的循环 - ＆gt; 1.jpg - ＆gt; 2.jpg - ＆gt; 3.jpg - ＆gt; default.jpg如果每个缩略图目录中只有四个图像，那就太棒了。但是如果每个图像src链接有不同数量的拇指呢？例如，如果第一图像具有6个拇指，第二图像具有8个拇指，并且第三图像具有11个拇指，该怎么办？使代码无关心图像目录中有多少拇指的秘诀是什么，所以无论拇指数量多少，它都会遍历所有拇指？

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

2 个答案: