javascript - 带有更新主图像的缩略图的画廊

Question

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

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

我希望这样做是为了宣传照明演示，所以褪色是关键部分。

提前致谢，

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

Answer 1

我创建了这个，希望对您有所帮助：

http://jsfiddle.net/K7ANs/

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

这是一个更新的 jsFiddle

来源

jQuery API - :动画选择器
jQuery API - .is() jQuery API
- .fadeIn()
jQuery API - .fadeOut()