如何使用jQuery循环水平库？

我正在制作一个水平画廊，它将显示混合式封面，我有五个div，其中包含panel_1，panel_2等ID。发生什么事情时，我到达面板5并继续滚动，它不会循环回面板1如我所愿。如何使用jQuery循环水平库？

您可以查看我至今在这里：http://worldwidemixtapes.com/newtheme.html

我的jQuery的知识是初学者，但我之前已经实施的jQuery插件，如果很好地解释可以理解的一些方法。

这是我的第一个问题，所以如果它太模糊，请让我知道，所以我可以更具体。

感谢您的帮助！

<div id="mixtapeWallInner"> 
<div id="panel_1" class="mixtapePanel current" style="left: -972px; "></div> 
<div id="panel_2" class="mixtapePanel" style="left: -972px; "></div> 
<div id="panel_3" class="mixtapePanel" style="left: -972px; "></div> 
<div id="panel_4" class="mixtapePanel" style="left: -972px; "></div> 
<div id="panel_5" class="mixtapePanel last" style="left: -972px; "></div> 
</div>

来源

2011-05-29 dporchia

解决方案2：

花了一点时间，但我编写了一个“看似无穷无尽的”旋转木马。在这里发生的事情很多，脚本会根据您移动的方向将DOM中的div移动到循环的结尾或开始。

http://jsfiddle.net/wdm954/8GKz6/11

（使用该代码时，请包括的注释。）

解决方案1：

在创建内容 “转盘” 像这样的一个常用技术是跳当您尝试滚动过去的最后一个DIV时，回到第一个DIV。下面是我编写了一个简单的例子...

http://jsfiddle.net/wdm954/VFwLT/5/

来源

2011-05-30 01:46:30 wdm

我明白你要去哪里，这很好。但我试图达到像http://lifeandtimes.com上显示的轮播。在那里，它会到达最后一个div面板，然后再次循环。 – dporchia 2011-05-30 23:21:32

@dporchia看看我的新解决方案。这应该够了吧。让我知道如果你发现任何错误。 – wdm 2011-05-31 04:11:31

谢谢！我今晚会试一试，并告诉你这是如何解决的。 – dporchia 2011-06-14 04:29:19

你必须做的是保持至少一个面板关闭屏幕，并有准备无论是从向左或向右移动到位的一个副本。本周晚些时候，我将撰写一篇关于如何在HTML5中复制Windows Phone Panel控件的博客，它是这样做的。您可以查看我的示例网站http://m.movie.extremewebworks.com。因此，当您在面板之间移动时，您可以将屏幕外的面板移动到右侧或左侧，以保证事情顺利进行。

来源

2011-05-29 22:40:34

感谢您的答复克里斯，但我不完全明白你的意思。我的屏幕右侧有panel_4和panel_5，屏幕左侧有panel_1和panel_2。从你说的是我需要创建另一个面板？用什么jQuery方法来保持5个面板的循环？ – dporchia 2011-05-29 22:45:48

如何使用jQuery循环水平库？

回答

相关问题