如何向右滑動我的div

我正在創建我想要滑動的div列表。每張幻燈片都有自己的圖像和某種描述。我已經看到了幾種滑動方法，但我仍然無法自己創建一個。如何向右滑動我的div

我在尋找的想法：

創建的div的列表。第一個可見
當我按下「下一步」或「上一個」查看列表的下一個或前一個元素，隱藏/淡入/滑動右邊的另一個

的幻燈片過渡必須是正確的，以防萬一。

我不是要求你爲我建立代碼，但任何建議都會被推測。

謝謝！

來源

2012-05-30 Sonhja

有很多的JavaScript傳送帶插件，特別是像jQuery這樣的框架插件。

jCarousel是最流行的，但一個簡單的谷歌搜索將顯示大量的結果之一。他們中的大多數將允許您配置滾動方向以及要顯示多少元素等等。

來源

2012-05-30 13:34:27 Luca

是的，我找過其中的一些。但其中一些是相當複雜的，我的水平迫使我建立一個更簡單的。對於像我這樣的新手來說，這個鏈接真的很有趣！非常感謝。 – Sonhja

如果你不堅持建立一個從頭開始，你可以使用

BxSlider

它可以讓你與過渡，速度，尋呼機鏈接沿着配置許多設置，並有大量的回調方法，你可能需要在有一點。

有很多其他選項可用。

來源

2012-05-30 13:36:37

我需要說...是的！非常有趣的一個！ – Sonhja

首先，這裏有很多插件，你可以在這裏閱讀代碼來理解他們的標記。

基本思路如下：

你有一個懸空列表（<ul>）在您的項目（在這種情況下圖像）顯然是<li> -Tag。這個標籤有一個不變的width。將常量項目width和overflow-x:hidden;設置爲該div的列表。

在你的JavaScript計算var maxWidth = constantWidth * numberOfElements。

當發生上一次/下一次單擊時，您只是+/- <ul> -Tag的margin-left樣式屬性的常數。當你用jQuerys .animate()方法做到這一點時，你有一個體面的滑動效果。要捕捉元素外部的滑動，請使用maxWidth變量，並在執行動畫之前根據計算出的margin-left進行檢查。

來源

2012-05-30 13:38:06

有趣...這是我正在尋找的手動方式。但我需要說，我正在看你所有的答案。謝謝大家。 – Sonhja

看看其中的一些;

http://www.blogohblog.com/20-killer-image-sliders-carousels/

來源

2012-05-30 13:47:54 pjmil

如何向右滑動我的div

回答

相關問題