如何使用jQuery循环水平图库？ [英] How do I loop horizontal gallery using jQuery?

问题描述

我正在一个水平的画廊，将显示mixtape封面，我有五个div的id为panel_1，panel_2等等。什么发生是当我到达面板5，并继续滚动，它不循环回面板

您可以查看我到目前为止的内容： http://worldwidemixtapes.com/newtheme.html

我对jQuery的了解是初学者，但我已经实现了jquery插件

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

感谢您的帮助！

 < div id =mixtapeWallInner > 
< div id =panel_1class =mixtapePanel currentstyle =left：-972px;>< / div> 
< div id =panel_2class =mixtapePanelstyle =left：-972px;>< / div> 
< div id =panel_3class =mixtapePanelstyle =left：-972px;>< / div> 
< div id =panel_4class =mixtapePanelstyle =left：-972px;>< / div> 
< div id =panel_5class =mixtapePanel laststyle =left：-972px;>< / div> 
< / div> 
  

解决方案

解决方案2：

花了一点时间，但我编码了一个看似无尽的旋转木马。这里发生的很多事情是脚本会将DOM中的 div 移动到循环的结束或开始，具体取决于您要移动的方向。

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

（请在使用此代码时附上评论。）

---

1：

当创建一个内容carousel，比如这是一个常见的技术是跳回到第一个DIV，当你试图滚动过去的最后一个DIV。这是我编码的基本示例...

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

I'm working on a horizontal gallery that will display mixtape covers, I have five divs with an id of panel_1, panel_2, etc. What happends is when I reach panel 5 and continue to scroll, it doesnt loop back to panel 1 again as I would like it to.

You can view what I have so far here: http://worldwidemixtapes.com/newtheme.html

My knowledge of jQuery is beginner but I have implemented jquery plugins before and can understand some of the methods if explained well.

This is my first question so if its too vague, please let me know so I can be more specific.

Thanks for your help!

<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>

解决方案

Solution 2:

Took a little time but I coded up a "seemingly endless" carousel. Pretty much what happens here is the script will move a div in the DOM to the end or beginning of the cycle depending on which direction you're moving.

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

(Please include the comments when using this code.)

---

Solution 1:

When creating a content "carousel" such as this a common technique is to jump back to the first DIV when you're trying to scroll past the last DIV. Here is a basic example I coded up...

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

这篇关于如何使用jQuery循环水平图库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！