jcarousel循环项目问题

时间:2010-12-27 22:25:05

标签: php javascript jcarousel

想知道是否有人可以解释我与Jcarousel有关的特定问题。

我已经调整了“dynamic_ajax_php.php”示例,在数据库上使用wordpress查询成功地获取数据,然后我将所有这些都添加到xml格式中,然后我使用上面的示例来读取xml并显示在jcarousel。

一切都很好,但是在设置循环和自动选项时会有一个琐碎的问题。

基本上,如果没有足够的项目来填充jcarousel的宽度,那么它会显示余数的空白项目,直到下一次自动迭代(基本上问题出在初始加载时)

不幸的是,我必须让这个jcarousel变宽,所以我无法锁定宽度。

任何人对如何在初始加载时正确制作jcarousel包装有任何想法?

function mycarousel_itemLoadCallback(carousel, state)
{
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }

    jQuery.get(
        'mediabox/write.xml',
        {
            first: carousel.first,
            last: carousel.last
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, first, last , xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('totalGalleryItems', xml).text()));

    jQuery('imagePath', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
    });
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
    return '<img src="' + url + '" width="75" height="75" alt="" />';
};



jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({

                                    auto: 4,
                                    wrap: 'circular',
        // Uncomment the following option if you want items
        // which are outside the visible range to be removed
        // from the DOM.
        // Useful for carousels with MANY items.

        // itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},

        itemLoadCallback: mycarousel_itemLoadCallback
    });


});

作为测试,我将skin.css中两个css属性的宽度设置为;

.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
    width:  550px;
    height: 77px;
}

.jcarousel-skin-ie7 .jcarousel-container-horizontal {
    width: 550px;
    padding: 20px 40px;
}

任何帮助都非常感谢!

感谢您寻找

1 个答案:

答案 0 :(得分:0)

您可以尝试在调用轮播之前根据当前宽度放置一些占位符,并在加载轮播后删除它们