JQuery的缩略图SRC肩（多图片）

现状：JQuery的缩略图SRC肩（多图片）

问题：在我们已经有了这个DIV与谁需要他们的src缩略图被悬停改变缩略图悬停时，我们需要每2秒从default.jpg更改缩略图src - > 1.jpg - > 2.jpg - > 3.jpg - > default.jpg（鼠标悬停在鼠标上方时通过它们循环，鼠标悬停后它需要停下来并留在当前图像上）

我试过的：大量来自其他网站和JQuery循环插件的示例代码。尝试使用该解决方案失败：http://ListAndPlay.com

我对你将如何解决问题像这样:)很好奇：jquery continuous animation on mouseover

将上使用！

来源

2010-10-02 MeProtozoan

试试这个（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>

更新：具有可变数量的每个图像的大拇指I updated the demo也允许您添加data-thumbs属性，其中包含文件名（如果a大拇指使用相同的根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/）工作，因为代码是修改的链接目前显示的网址。对于位于不同位置的图片，请使用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); 
    }); 

});

来源

2010-10-02 15:21:40 Mottie

Fudgey你真了不起！代码是完美的，我终于明白了将来如何处理这些问题，非常感谢！ – MeProtozoan 2010-10-02 15:48:05

我很高兴你得到你需要的东西。你是否需要我在脚本中添加一些评论，以防有什么不清楚的地方？ – Mottie 2010-10-03 15:51:18

哇so老大！ – 2017-04-21 07:25:53

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

从default.jpg - > 1.jpg - > 2.jpg - > 3.jpg - > default.jpg显示的循环示例，如果在缩略图的每个目录中只有四个图像，那么效果会很好。但是，如果每个图像src链接有不同数量的拇指呢？例如，如果第一个图像有6个拇指，第二个图像有8个拇指，第三个图像有11个拇指，该怎么办？使代码不在乎图像目录中有多少个大拇指的秘诀是什么，所以无论拇指的数量如何，它都会循环遍历所有的大拇指？

来源

2014-02-09 19:46:20 user3290470

哇，对不起，3年后！...我更新了我的答案，以显示修改后的代码。下一次继续并开始一个新问题，或添加评论，因为这不是真正的答案，并且可能会被删除。 – Mottie 2017-02-15 14:15:28

JQuery的缩略图SRC肩（多图片）

回答

相关问题