如何向右滑动我的div

Question

我正在创建一个我想要滑动的div列表。每张幻灯片都有自己的图片和某种描述。我已经看过几种滑动方法，但我仍然不能自己构建一种方法。

我正在寻找的想法：

• 创建一个div列表。第一个可见
• 当我按下“下一个”或“上一个”时，请查看列表的下一个或上一个元素并隐藏/淡出/滑动另一个元素

幻灯片切换需要正确，以防万一。

我不是要求你为我构建代码，但任何建议都会被贬低。

谢谢！

Answer 1

有很多javascript carousel插件，特别是像jQuery这样的框架插件。

jCarousel是最受欢迎的广告之一，但简单的Google搜索会显示很多结果。其中大多数将允许您配置滚动方向和要显示的元素数量等等。

Answer 2

如果你不坚持从头开始构建一个，你可以使用

BxSlider

它允许您配置许多设置以及转换，速度，寻呼机链接，并且在某些时候可能需要许多回调方法。

有很多其他选择。

Answer 3

首先，那里有很多插件，您可以在其中阅读代码以了解其标记。

基本理念如下：

您有一个左浮动列表（<ul>），其中您的项目（在本例中为图片）显然是<li> - 标记。此标记具有常量width。使用常量项width将div包围在列表周围，并将overflow-x:hidden;设置为div。

在您的JavaScript中，您计算​​var maxWidth = constantWidth * numberOfElements。

当发生上一次/下一次点击时，您只需+ { - 与margin-left - 标记的<ul>样式属性的常量。使用jQuerys .animate()方法执行此操作时，您可以获得不错的滑动效果。要捕获元素外部的滑动，请使用maxWidth变量，并在执行动画之前将其与计算的margin-left进行核对。

Answer 4

看看其中一些;

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