如何修改 jQuery Cycle 插件的渲染?

发布于 2024-12-12 05:08:33 字数 288 浏览 0 评论 0 原文

我有一个模型设计,我想我想使用 jQuery Cycle 来实现。样机截图如下。 jQuery Cycle 中最接近的示例是: http://jquery.malsup.com/cycle/ pager2.html,但它离我想要的结果还很远。

我如何修改 jQuery Cycle 插件以获得下面模型中所示的效果?我可以使用另一个更接近模型的 jQuery 或 Javascript 插件(如果存在)。

I have a mockup design that I think I want to use jQuery Cycle for. The mockup screenshots are below. The closest example of this from jQuery Cycle is this: http://jquery.malsup.com/cycle/pager2.html, but it is far from where I want to end up.

How would I modify the jQuery Cycle plugin to get the effect illustrated in the mockups below? I am ok with going with another jQuery or Javascript plugin that is closer to the mockups if one exists.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

舂唻埖巳落 2024-12-19 05:08:33

您可以使用此 Cycle 演示开始。这是基本的 javascript,用于让下一个/上一个按钮与循环插件一起使用。但是您必须使用 CSS 来完成繁重的工作才能使其看起来不错。

如果您不想尝试使用 CSS 使其看起来不错(意味着花哨的按钮和链接的位置),您可以使用这两个滑块插件之一:

这些插件的唯一问题是,您必须遵守他们的列表设置规则。我的意思是,页面上的 HTML 内容可能比您实际想要的多得多。

You can use this Cycle demo to start out. It is the basic javascript to get the next/previous buttons working with the cycle plugin. But you will have to do the heavy lifting with CSS to make it look good.

If you don't want to try to make it look good with CSS (meaning fancy buttons and placement of links) you can use one of these two slider plugins:

The only problem with these plugins, is that you have play by their rules of how your list is set up. I mean you might have a lot more HTML than you actually want on the page.

墨落画卷 2024-12-19 05:08:33

您可以尝试bxslider,它更接近您的目标:

http://bxslider.com/

例如:

http://bxslider.com/examples/thumbnails-pager-method-1

http://bxslider.com/examples/thumbnails-pager-method-2

它已根据 MIT 许可证获得许可。

You could try bxslider which is closer to your goals :

http://bxslider.com/

e.g :

http://bxslider.com/examples/thumbnails-pager-method-1

http://bxslider.com/examples/thumbnails-pager-method-2

It's licensed under MIT Licence.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文