0

我使用 jQuery 创建了一个幻灯片轮播，并隐藏了溢出，您可以在其中通过从 margin-left 值添加或减去幻灯片宽度来来回导航。

http://trainingstage.ntistudio.co.uk/slideshows/2/presentation

http://pastebin.com/nYQiEfqB

我现在希望能够将幻灯片分类到相关部分，然后导航到每个部分的开头，但不确定如何执行此操作。主要问题是内容将是动态的（使用 rails 构建），因此无法将值硬编码到每个幻灯片中。

谁能给我一些关于从哪里开始 jQuery 的指示，以便我可以塑造 rails 后端？一个类似的让我解构的工作项目也可能很好。

任何关于这个问题的提示或提示都非常受欢迎。谢谢

4

3 回答 3

2
  • 为部分第一页上的元素提供唯一 ID。

  • 使用 jQuery 查找该元素的 offset() http://api.jquery.com/offset/

  • 计算该元素存在的幻灯片。粗略算法：current_slide = Math.ceil($('example').offset().left / slide_width);

注意：您将希望始终对上述操作的结果进行四舍五入，因为您将放映的第一张幻灯片初始化为 1。

缺点：我不知道 offset() 是否真的会根据幻灯片的完整文档或只是单个幻灯片来报告元素。

这个解决方案很混乱，它甚至可能不起作用，但也许其中的想法对你有用。

于 2012-06-11T10:28:48.767 回答
0

使用标识符对每个元素进行分类。例如，一个猫类，将类“猫”添加到每个项目。假设您在猫之后养狗，并且您想去养狗。

var slideAmount = $('.cats').length * 500 //500 being your viewport width
$('.carouselParent').animate({'left' : -slideAmount});

这是非常基本的逻辑位，我想你会明白我在说什么？

于 2012-06-11T20:10:46.860 回答
0

在查看了您的网站目标后，我刚刚遇到了满足您要求的完美jQuery 滑块。

jQuery Local Scroll可以轻松处理 AJAX 内容，并允许在您的主要部分中包含子部分。

jQuery AJAX Local Scroll v1.2.7: 网页 AJAX Demo和主页是HERE。

编辑：如果滚动条是在页面加载时动态创建的，那么请查看它们的正常非 AJAX 版本，该版本显示了部分和子部分的不同导航技术。

EDIT2：至于使用 jQuery 在不同元素之间导航，这个插件也可以使用 jQuery 选择器滚动到任何元素。

于 2012-06-12T02:13:08.303 回答