<div> 点击和动画交互的轮播或相关建议

Question

在昨天下午浏览了 SO 和在线后，并没有完全找到我认为我需要的东西，我想向社区寻求建议。我有一个特定的交互，我正在尝试制作原型，我猜有一个插件我可以使用而不是从头开始，但找不到它。

交互是一个长的水平显示和幻灯片。应用打开时显示一个 div。用户向右滑动或单击，第一个 div 向左滑动（但不完全离开屏幕），第二个 div 淡入并移动到第一个 div 所在的空间。尽可能多的窗格继续交互（对于这个原型，我们有五个层次）。用户可以随意返回和退出——我计划通过单击可见 div 的左右两侧来显示这一点，因为设计显示了一个灰色的大条，每边都有一个淡入的箭头。向后“向上”移动与“向下”移动相反——div 淡出，前一个 div 滑入到位。

此演示/原型不需要触摸。

根据要求，这是一个草图：

Answer 1

以为我会尝试制作原型。尺寸很小，因为它在 jsfiddle 中，但您可以展开结果窗口并根据需要更改尺寸。我只在 Chrome 中测试过，它使用了很多 CSS3：

http://jsfiddle.net/TdAhm/4/

这是一个屏幕截图。为什么不？我认为它与草图很好地对齐。对于您是否真的希望前一个 div 被压扁而不是仅仅重叠，我有点困惑。这似乎是不可取的，因为 div 中的内容会被破坏，但这是可行的。

Answer 2

这似乎是一段相当复杂的代码

看看链接 .animate 函数让它发生

很难准确地想象你想要做什么......一旦你使用 jquery 获得了 femilair，我相信你应该能够弄清楚这一点。

使用 .animate、回调函数，也许还可以使用 .queue

我无法提供比第一个谷歌结果更​​容易找到的示例，因为它太复杂了

如果这对你没有帮助，你应该像马特所说的那样，把它画出来并试着说清楚

Answer 3

很难给出答案，但据我了解，你可以看看

jQuery Tools Scrollable

互动

Nivo Slider

我正在开发（可能）类似的东西。看看this site（我还在开发中）。

希望对你有所帮助。