Question

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

除此之外，关键要求是当您点击另一个缩略图时，当前显示的图像逐渐消失，然后新图像淡入（因此它们会淡入淡出）。

我希望这样做是为了推广照明演示，因此衰落是关键部分。

提前致谢，

（希望这是在正确的部分并且已被正确询问！对不起，如果不是，我是新来的）

Answer 1

我创造了这个，我希望它有所帮助：

$('.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');
    });
});

<强>更新

要阻止人们点击另一个缩略图，直到当前动画结束，我只是将函数包装在if语句中，以检查图像是否为动画。我也可以检查是否有两个图像（因为在动画期间有两个图像，当它完成时另一个被删除）

$('.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');
        });
    }
});

Here is an updated jsFiddle

<强>来源（S）

jQuery API - :animated selector
jQuery API - .is()
jQuery API - .fadeIn()
jQuery API - .fadeOut()

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

1 个答案: