你如何使用jCarousel和静态内容进行圆形旋转木马?

时间:2009-09-07 14:59:31

标签: javascript jquery jcarousel

在jCarousel插件网站上有一个关于如何进行循环轮播的示例,但它使用的是动态生成的内容。我想知道如何用静态内容做同样的事情。

这是使用动态内容的jCarousel循环示例:
http://sorgalla.com/projects/jcarousel/examples/special_circular.html

另外,由于我这样做是为了定期更新的网站,如果只显示3个列表项,如何阻止上一个和下一个按钮显示?

2 个答案:

答案 0 :(得分:0)

该示例不使用动态内容,而是使用静态内容。它正在加载的图像列表是:

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'}
];

该页面上的代码无效?

如果您对评论感到困惑:

<!-- The content will be dynamically loaded in here --> 

所有这些意味着轮播是通过以下代码在页面加载时启动的:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});

答案 1 :(得分:0)

只需在init函数中添加wrap:last即可使其循环。