如何创建具有重叠视图的旋转木马?[jsFiddle和ASCII艺术包括在内}

How to create a carousel with over-lapping view? [jsFiddle and ASCII art Included}

本文关键字：jsFiddle ASCII 艺术 包括 旋转木马 创建 何创建 视图 重叠      更新时间：2023-09-26

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

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

任何能帮我指明正确方向的人都会很棒，谢谢！

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

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

我修改了你正在使用的插件代码。我没有完全测试，但这会给你一个很好的想法，你必须做什么。

我做了以下修改：

添加了2个附加设置

  • itemwidth-这是一个1-100之间的数字，象征着单个项目所占的胡萝卜素宽度的百分比。

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

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

您遇到的问题是，许多jquery插件和jquery UI将您的元素封装在额外的"div"和其他DOM对象中。因此，当你使用样式来改变carosel中页面的宽度时，它们实际上在其他东西中。无论如何，我不认为你只能用css来实现它，因为代码的动画部分是基于内部测量的宽度。

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

相关文章：