用jQuery创建一个圆形列表

我正在为一个网站创建一个移动版本，并且有一个列表，我希望它能够使用触摸手势（如Yahoo的移动版本网站）。我为jQuery使用Swipe插件，一切正常，但问题是我想使新闻列表无限，并且我没有关于如何做的一个单一的想法。用jQuery创建一个圆形列表

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

我的目录是这样的：

<div class="newswrapper"> 
    <ul> 
     <li> 
      <a>Title 1</a> 
      <div class="image"> 
       <img src="dummyurl1.jpg" /> 
      </div> 
     </li> 
     <li> 
      <a>Title 2</a> 
      <div class="image"> 
       <img src="dummyurl2.jpg" /> 
      </div> 
     </li> 
     <li> 
      <a>Title 3</a> 
      <div class="image"> 
       <img src="dummyurl3.jpg" /> 
      </div> 
     </li> 
    </ul> 
<div>

和我的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); 
     } 
    } 
});

有什么建议？

来源

2012-10-11 Farid Rn

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

经过几天的搜索，我发现iOSSlider这是与浏览器和移动浏览器（Android和iDevices都），这是我一直在寻找。

来源

2012-11-24 14:18:02

我的方法是检查您是否滑倒width的一个。如果是这样，从列表中删除第一个，把它放在后面，并通过的li

宽度可以为另一个方向做同样的重置ul的left。

来源

2012-10-11 15:56:49 RobAu

我不明白！ –

用jQuery创建一个圆形列表

回答

相关问题