javascript - 如何创建具有重叠 View 的轮播？ [包含 jsFiddle 和 ASCII 艺术}

Question

http://jsfiddle.net/yxhzU/1042/

我正在尝试修改此示例，以便在顶部轮播中您能够看到两侧 10% 的幻灯片。

如果能帮我指明正确的方向，那就太好了，谢谢!

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

Answer 1

http://jsfiddle.net/yxhzU/1069/

我修改了您使用的插件代码。我没有对其进行全面测试，但这会让您清楚地知道您必须做什么。

我做了以下修改:

添加了 2 个附加设置

• itemwidth - 这是一个从 1 到 100 的数字，表示单个元素占据轮播宽度的百分比。

• startingoffset - 类似地，它是左侧的起始空间量，也基于百分比 (0-100) 打开

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

您遇到的问题是许多 jquery 插件和 jquery UI 东西将您的元素包装在额外的“divs”和其他 DOM 对象中。因此，当您使用样式更改轮播中页面的宽度时，它们实际上位于其他内容中。我不认为你可以让它只与 css 一起工作，因为代码的动画部分是基于内部测量的宽度。

编辑: 仅供引用，我只在 Chrome 中查看过。