Javascript 如何创建具有重叠视图的旋转木马？[包括JSFIDLE和ASCII art}

我试图修改这个示例，以便在顶部旋转木马中，您能够看到两侧10%的幻灯片

如果能帮我找到正确的方向，那就太好了，谢谢

Viewable area would look something like this:
______    _________________________    _______
______|  |_________________________|  |_______
prev^            ^current^             ^next

我修改了你使用的插件代码。我没有完全测试它，但这会让你对你必须做的事情有一个很好的了解

我做了以下修改：

添加了2个附加设置

• itemwidth-这是一个1-100之间的数字，表示单个项目占用的carosel宽度的百分比

• startingoffset-同样，它是左侧打开的起始空间量，也基于百分比（0-100）

最后，我修改了所有元素被包装和设置动画的计算，以使用新的“计算”宽度，包括上述缩放

您遇到的问题是，许多jquery插件和jquery UI将您的元素包装在额外的“div”中和其他DOM对象。因此，当您在carosel中使用样式更改页面宽度时，它们实际上包含在其他内容中。我不认为您可以仅使用css，因为代码的动画部分基于内部测量的宽度

编辑：

---

仅供参考，我只在Chrome中查看过它。

希望我能给出多张放弃票和正确答案。非常感谢你为我解释这一点所做的所有工作。没问题，我喜欢jquery，在工作中不太会使用它。这很有意思。我想弄清楚的另一件事是在w上启用一些重新计算indow resize。类似于在

$（窗口）上再次运行计算。resize（函数（）{}）

我很高兴能进入这里，只是想问你一些关于最好的方法的建议。谢谢。应该不会太难。你需要做一些事情。1.钩住窗口上的resize事件和事件处理程序。2.让处理程序重新初始化carosel中所有容器的大小，最后3.调整adust大小时用于说明大小更改的当前位置。如果使用该位置，则需要注意动画持续时间。我怀疑您可能会出现一些异常行为。最好在调整大小事件中跳过动画。