javascript - Javascript/JQuery：带有非常大图像的画廊。我怎样才能让它在点击时淡出，加载下一张图像，然后用新图像淡入？

Question

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

我对 jquery 有所了解，但我对实际的 javascript 还是很陌生。我手头唯一的参考书是 1997 年的“Javascript for Dummies”的副本。这对我有什么用处，还是从那时起 Javascript 发生了变化？

Answer 1

有很多用于图片库的 jQuery 插件：Galleria、GalleryView、Pikachoose和这个。

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

Answer 2

请买一本更新的书，或者只是将网络用作资源，任何信息。从 1997 年开始，将会非常过时。

这是我之前推荐给初学者的一个非常简单的网站：http: //htmldog.com/guides/javascript/ 不，它并没有涵盖所有内容，但这就是它的好处，你会得到一些关键的东西，然后能够在谷歌上搜索更具体的东西。

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

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