Javascript/JQuery：具有非常大图像的图库。我怎么能点击淡出，加载下一个图像，然后淡入新的图像？

Question

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

我知道有点jquery，但我很新的实际JavaScript。我手边唯一的参考书是1997年的“傻瓜JavaScript”的副本。这对我来说有什么用处，或者从那时起改变了Javascript？

Answer 1

图像库有很多jQuery插件：Galleria,GalleryView,Pikachoose和this one。您可以搜索jQuery plugins page。

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