0

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

我正在寻找的想法：

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

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

我不是要你为我构建代码，但任何建议都会受到赞赏。

谢谢！

4

4 回答 4

2

有很多 javascript carousel 插件，尤其是 jQuery 等框架的插件。

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

于 2012-05-30T13:34:27.753 回答
1

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

Bx滑块

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

还有很多其他选择。

于 2012-05-30T13:36:37.277 回答
1

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

基本思路如下：

您有一个左侧浮动列表 ( <ul>)，您的项目（在本例中为图像）显然是<li>-Tag。这个标签有一个常数width。用常量项将 div 包裹在列表周围width并设置overflow-x:hidden;为 div。

在你的javascript中你计算var maxWidth = constantWidth * numberOfElements。

当发生上一个/下一个单击时，您只需将常量与 -Tag 的margin-left样式属性<ul>相加。当您使用 jQuerys.animate()方法执行此操作时，您将获得不错的滑动效果。要捕获元素外的滑动，请使用maxWidth变量并margin-left在执行动画之前将其与计算结果进行检查。

于 2012-05-30T13:38:06.323 回答
0

看看其中一些；

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

于 2012-05-30T13:47:54.003 回答