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