Question

我目前正在尝试将jCarousel用于Web应用程序，在该应用程序中，我在垂直轮播中一次显示一组数据，一次显示一个窗格。我遇到了一个问题，我可能会为我将要显示的数据创建一个未知数量的窗格。

我没有使用大量的lis及其相关内容来重载DOM，而是通过创建3个li元素来寻找使用jCarousel的方法（我指定3，因为我需要至少一个元素高于和低于当前正在查看用于滚动目的的元素），然后当用户在数字2处单击“下一步”时，在结束时动态创建新的li，同时删除第一个li。显然，这需要支持向前移动所有的旋转木马项目，并且还要回到第一个项目。

希望这个解释足够清楚 - 希望我能画一幅画！

任何想法都将不胜感激！

Answer 1

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>

使用固定数量的元素和jCarousel并动态添加和删除开头和结尾

1 个答案: