Javascript 具有更新主图像的缩略图的库

是否有人知道任何显示缩略图的现有Javascript（或jquery），当您单击缩略图时，主图像会更新

除此之外，关键的要求是当您单击另一个缩略图时，当前显示的图像淡出，然后新图像淡入（因此它们交叉淡入）

我希望这样做，以促进照明演示，所以褪色是关键部分

提前感谢,

---

（希望这是正确的部分，并且询问正确！如果不是，很抱歉，我是新手）

我创建了这个，希望它能帮助：

$（'.thumbnail'）。在（'click'，function（）上{
$（'#imageWrap'）。附加（''）；
$（'#imageWrap.active'）.fadeOut（1000）；
$（'#imageWrap.next'）.fadeIn（1000，函数（）{
$（'#imageWrap.active'）.remove（）；
$（this.addClass（'active'）；
});
});

更新：

为了阻止人们在当前动画完成之前单击另一个缩略图，我将函数包装在if语句中，以检查图像是否正在制作动画。我还可以检查是否有两个图像（在动画中有两个图像，当动画完成时，另一个图像被删除）

$（'.thumbnail'）。在（'click'，function（）上{
如果（！$（'#imageWrap.active'）。是（':animated'））{
$（'#imageWrap'）。附加（''）；
$（'#imageWrap.active'）.fadeOut（1000，function（）{
$（this）.remove（）；//我从另一个函数中移动了它，因为将$（this）作为目标更准确。
});
$（'#imageWrap.next'）.fadeIn（1000，函数（）{
$（this.addClass（'active'）；
});
}
});

来源

---

这听起来很简单。嗨，比利，我拿了十几个预先制作好的脚本，试图添加淡入效果，但没有效果。这就是我得到的秘密：-我不能从头开始编写Javascript，但我在编辑它方面“还可以”。谢谢你的帮助。应该帮你嗨，比利，太棒了。一个小问题是，当你快速点击几个缩略图时（烦人的人会这样做！）它会断裂并变成空白。有没有办法阻止他们单击另一个缩略图，直到它完全加载？

$('.thumbnail').on('click',function(){
    $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />');
    $('#imageWrap .active').fadeOut(1000);
    $('#imageWrap .next').fadeIn(1000, function(){
        $('#imageWrap .active').remove();
        $(this).addClass('active');
    });
});

$('.thumbnail').on('click',function(){
    if (!$('#imageWrap .active').is(':animated')){
        $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />');
        $('#imageWrap .active').fadeOut(1000, function(){
            $(this).remove(); // I moved this from the other function because targeting $(this) is more accurate.
        });
        $('#imageWrap .next').fadeIn(1000, function(){
            $(this).addClass('active');
        });
    }
});