在jCarousel中使用固定數量的元素並動態添加和刪除開始和結束

我目前正在嘗試將jCarousel用於Web應用程序，在該應用程序中，我一次顯示一組數據，一個窗格在垂直旋轉木馬。我遇到了一個問題，我可能會爲我要顯示的數據創建未知數量的窗格。在jCarousel中使用固定數量的元素並動態添加和刪除開始和結束

而不是重載與噸的lis及其相關內容的DOM，我正在尋找一種方法來使用jCarousel通過創建3個li元素（我指定3，因爲我將需要至少一個元素上面和下面的當前元素被查看用於滾動目的），然後在用戶點擊數字2處的「下一個」時在最後動態地創建新的li，並且同時移除第一個li。很明顯，這需要支持所有的旋轉木馬物品前進，並且一直回到第一個。

希望這個解釋足夠清楚 - 希望我能畫出一張圖片！

任何想法將不勝感激！

來源

2012-01-19 user1159566

jCarousel提供了許多動態加載內容的選項。例如，你可以定義一個javascript array of your slides：

var mycarousel_itemList = [ 
    {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"}, 
    {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"}, 
    {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"}, 
    {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"}, 
    {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"}, 
    {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"}, 
    {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"}, 
    {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"}, 
    {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"}, 
    {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"} 
]; 

function mycarousel_itemLoadCallback(carousel, state) 
{ 
    for (var i = carousel.first; i <= carousel.last; i++) { 
     if (carousel.has(i)) { 
      continue; 
     } 

     if (i > mycarousel_itemList.length) { 
      break; 
     } 

     carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1])); 
    } 
}; 
/** 
* Item html creation helper. 
*/ 
function mycarousel_getItemHTML(item) 
{ 
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />'; 
}; 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
     size: mycarousel_itemList.length, 
     itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback} 
    }); 
});

唯一的HTML，這需要的是：

<ul id="mycarousel" class="jcarousel-skin-ie7"> 
    <!-- The content will be dynamically loaded in here --> 
    </ul>

來源

2012-01-19 22:55:38 Sinetheta

在jCarousel中使用固定數量的元素並動態添加和刪除開始和結束

回答

相關問題