用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創建一個圓形列表

回答

相關問題