Javascript / JQuery：具有非常大图像的画廊。 单击淡出后如何加载它，加载下一张图像，然后使用新图像淡入淡出？

Question

老板让我在一个网站上工作，该网站的中间基本上有一个很大的画廊。 这一部分的工作方式是用户单击下一个/上一个按钮，图像淡出，显示加载的旋转图像gif，然后在下载新图像时淡入新图像。 我什至不知道从哪里开始。

我对jquery有所了解，但是对于真正的javascript我还是很陌生。 我手头唯一的参考书是1997年的“傻瓜Java脚本”副本。这对我来说根本没有用，还是从那时起Java脚本已经改变了？

Answer 1

有很多用于图库的jQuery插件： Galleria ， GalleryView ， Pikachoose以及这个 。

或者，您可以从jQuery插件页面进行搜索。

Answer 2

请获取更新的书，或仅将网络作为任何信息的资源。 从1997年开始将非常过时。

这是我推荐给初学者面前一个非常简单的网站： http://htmldog.com/guides/javascript/不，不面面俱到，但是这就是很好的话，你会得到一些关键的东西下来，然后可以在Google上搜索更多特定的内容。

为了给您一些准系统的开始，我会做这样的事情：

$(document).ready(function() {
    $('#nextBtn').click(function() {
        transitionToNextImage ();
    });
});
transitionToNextImage = function() {
    $('img.active-image').fadeTo(1000,0), function() {
        // fade out complete.
        $('#inProgressGif').show();
        getNextImage();
    });
};
getNextImage = function() {
    // make ajax call to get new image, and
    // in the success callback of the ajax call, 
    // remove the inProgressGif, and
    // add the image ot the DOM with opacity 0,
    // then slowly fade it in to opacity 1 (opposite
    // of what was done above
};