使用jQuery创建循环列表

我正在为一个网站创建一个移动版本，并且有一个列表，我想让它与触摸手势（如雅虎的移动版网站）一起工作。 我正在使用swipe插件用于jQuery，一切正常，但问题是我想让新闻列表无限，我对如何做到这一点没有一个想法。

问题是如果我向右滑动第一个项目，将会有一个空白的地方，我无法回到第一个项目，当我向左滑动最后一个项目时也会发生这种情况。

我的清单是这样的：

 
 
 Title 1 
  
 
 
 Title 2 
  
 
 
 Title 3 
  
 
 
 
 

我的jquery代码是：

 $(".newswrapper ul li").swipe({ var newsWidth = $('.newswrapper ul li:first').width(); swipe:function(event, direction, distance, duration, fingerCount) { if (direction == 'left') { $('.newswrapper ul').animate({left : '-=' + newsWidth}, 500); }); } else if (direction == 'right') { $('.newswrapper ul').animate({left : '+=' + newsWidth}, 500); } } }); 

有什么建议？

Answer 1

我的方法是检查你是否滑过一个li的width 。 如果是这样，从列表中删除第一个，将其放在后面，并将li的left重置为li的宽度

你可以为另一个方向做同样的事情。

Answer 2

我使用touchSwipe jQuery插件的经验不成功，它适用于桌面浏览器，但对于移动浏览器来说，它太麻烦了。

经过几天的搜索，我发现iOSSlider正在使用浏览器和移动浏览器（Android和iDevices），这就是我想要的。