實現旋轉木馬幻燈片的智能方式

Question

我使用Jquery爲圖像創建了自己的旋轉木馬幻燈片。 目前我有一個作爲與溢出視口的div：隱形;並在裏面我有一個長的div與所有不同的圖像彼此相鄰。

這意味着div可能有幾千像素寬。我想知道如果這可能是一個問題。

我想單獨加載所有的圖像，並只在需要時移動它們，而不是移動整組幻燈片。

您認爲如何實現高性能和輕便？

感謝

Answer 1

在滾動長的位圖或層可以引起視覺撕裂的影響，如果我是啓動一個項目像這個自己特定的設備 - 這是更棘手的完成 - 但遠不如用單獨控制的div 。

根據你想達到的目標，你通常只需要使用兩個獨立的（可能是三個）。您只需要將下一個圖像加載到視口外「隱藏」的div中，然後將其滑入當前可見視圖的滑動位置。

從優化的角度來看，以上是更好的方法，並且還可以靈活處理您可以實現的各種過渡效果（即幻燈片或淡入淡出等）。我還建議您將圖像列表存儲爲JS Array（並且在將每個圖像插入到HTML Dom之前預先加載）或將圖像列表存儲爲圖像列表（其將已經預加載瀏覽器）。

的一個很好的例子是下面的：

http://jquery.malsup.com/cycle/