在高層次上，我將如何構建圖像傳送帶？

Question

您能否向我解釋我需要爲網絡構建圖像輪播的事情？您可以使用數據結構和一般計算機科學術語 - 但沒有特定的語言。

例如：

1. 商店中的所有陣列或鏈接的列表的圖像
2. 當轉盤被加載時，調整所顯示的圖像爲X％的窗口尺寸
3. 當按下下一個按鈕， imageA移動到一個隱藏的HTML元素。

et cetera。

我希望這是有道理的。

謝謝。

Answer 1

你不想要任何特定的語言，但你想知道關於web上的傳送帶，你已經用'html'和'css'標記了這個標籤，所以我會假設我可以談論HTML和CSS，但我會盡量保持高水平。

如果我們忽略Flash，那麼您將剩下HTML + CSS + Javascript。執行此操作的常用方法是在HTML元素中排列圖像或其縮略圖（不要通過HTML調整大小 - 它看起來不錯，並且可以增加頁面加載時間），這些HTML元素本身包含在一層或多層包裝中元素。因此，串起來的整套圖像可能比觀察窗寬。 CSS用於管理它們的確切佈局，並防止它們溢出查看窗口。當我說窗口時，我只是指您想要旋轉木馬顯示的頁面部分。然後，使用Javascript來更改包裝圖像的HTML元素之一的CSS屬性，使其滾動或移動位置。

使用HTML5，您有更多的選擇，但上述是通常情況下直到現在完成的方式。

最後，如果你要實際實現這個，有很多腳本可能會滿足你的需求，但如果不是，我強烈建議使用像JQuery這樣的JavaScript框架 - 它會讓事情變得更容易，更容易。

Answer 2

如果你想自己構建它，一個簡單的方法是將主div和所有圖像水平排列。將溢出設置爲隱藏在主div上。然後使用JavaScript，並設置scrollLeft作爲用戶點擊下一個，上一個按鈕。