使用Javascript創建無縫循環圖像

Question

我的老闆正在讓我這樣做，我不確定如何在Javascript中做到這一點。

我需要做的是在html頁面上有3張圖片，向上滾動頁面。

所以，當用戶點擊下一步，這三張圖片滾動（消失在STUFF下），並被替換爲三個更多的圖像。當你直接點擊這些圖像時，它會更改文本框的內容（在這種情況下，標記爲REPLACE ME）。我甚至不知道此時應該使用Google。我瞭解REPLACE ME操作。但是我不確定如何讓圖像滾動並被另一個圖像取代（按下5次後圖像循環）。我認爲jquery會使它更容易，但大多數教程並不完全符合我的要求對於。有誰知道一個教程，將涵蓋這樣的事情。

A asset http://www.loopmedia.com/images/newsletter/SlideUpAndSlideUpV2.png

Answer 1

我想你想要像this或this

Answer 2

我敢肯定有插件，有可以做到這一點，你需要的是搜索。

如果你想自己做，那就是我該怎麼做的。

使用精靈，與第一和最後一個圖像是相同的（用於重疊），則簡單地indefinitly動畫精靈的top屬性，直到它達到一定值（最後一個圖像已完成滾動），並且當該發生，重置top價值，並再次。

Answer 3

好了，如果你想它背後的理論，這是它... SANS代碼：

你必須有一個div是容器。這與您需要圖像的「視口」一樣寬泛。這需要是overflow: hidden; position: relative;。

這裏面你需要一個與圖像視口一樣寬的div（如上所述），但是與所有內容一樣高。因此，這與滾動條中的所有5組圖像一樣高。這需要是position: absolute; top: 0; left: 0;。

在這個內部div的內部，你需要放置5個div，它們將包含圖像，每個圖像都在正常情況之上。

所以......現在，當你點擊「下一步」，你需要animate()（jQuery的）的內 div的top值爲-HEIGHT_OF_1_SET_OF_IMAGES。這給人一種錯覺，認爲圖片是從頁面上滾動出來的。

完成這些步驟後（見jQuery的動畫回調函數），你需要移動DIV這就是現在隱藏在頁面的頂部（第一組圖像）的底部使用appendTo()函數將其追加到內部div的結尾。同時你需要再次將top的值設置爲0。因此你再次啓動循環。

希望這是有道理的。 :)有任何問題給我留言。