Question

我正在处理一个水平图库，它将显示mixtape封面，我有五个div，其id为panel_1，panel_2等。当我到达面板5并继续滚动时它会发生什么事情，它不会循环回到面板再次按照我的意愿1。

您可以在此处查看我目前所拥有的内容：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>

Answer 1

解决方案2：

花了一点时间，但我编写了一个“看似无穷无尽”的旋转木马。几乎所发生的是脚本会将DOM中的div移动到循环的结束或开始，具体取决于您移动的方向。

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

（使用此代码时请注明注释。）

解决方案1：

当创建诸如此类的内容“轮播”时，一种常见的技巧是当您尝试滚动浏览最后一个DIV时跳回到第一个DIV。这是我编码的一个基本例子......

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

Answer 2

您需要做的是将至少一个面板保留在屏幕上并准备好从左侧或右侧移动到位的副本。我将在本周晚些时候写一篇关于如何在HTML5中复制Windows Phone Panel控件的博客，这样做。您可以查看我的示例网站http://m.movie.extremewebworks.com。因此，当您在面板之间移动时，可以将屏幕外面板向右或向左移动，以保持顺畅的流动。

如何使用jQuery循环水平图库？

2 个答案: