Question

如何让我的轮播在不同的持续时间滚动不同的项目？我试过玩这个事件无济于事。

$('#carousel').triggerHandler('configuration')

e.g。幻灯片1显示5秒，幻灯片2显示10秒，依此类推。

    jQuery(".desktop-carouselContainer").carouFredSel({
        scroll: {
            fx: "crossfade",
            onAfter: function (data) {
                data.scroll.duration = jQuery("#promo-timer", this).html() * 1000;
            }
        },
        auto: {
            progress: {
                bar: ".timer",
                updater: function (percentage) {
                    jQuery(this).width(percentage / (jQuery("#promos-container .desktop-carouselContainer li a img").width() / (jQuery(".pagination").width() + 15)) + "%");
                    jQuery(this).css({ "left": jQuery("#promos-container .desktop-carouselContainer li a img").width() - jQuery(".pagination").width() - 15 });
                },
                interval: 30
            }
        },
        pagination: {
            container: ".pagination",
            anchorBuilder: function (nr) {
                var src = jQuery(".promo-title", this).html();
                return '<div class="pagination-link">' + src + '</div>';
            }
        },
        width: 945,
        height: 429
    })

编辑:(解决方案）

在玩了一段时间之后，继续我的工作方式：

    ...
    auto: {
            onAfter: function (data) {
                jQuery('.desktop-arouselContainer').triggerHandler('configuration').auto.timeoutDuration = jQuery("#promo-timer", this).html() * 1000;
            }
        }
    ...

Answer 1

您可能必须使用事件回调来在每个周期后修改选项。类似的东西：

 // WARNING: HASTILY-WRITTEN AND UNTESTED PSEUDO-CODE!
// 
$("#carousel").carouFredSel({
    ... ,
    scroll: {
        onAfter: function(data) {
            // set duration depending on slide index
            case ( ... slide index = 1 ... ) {
                myDuration = 2000;
            }

            this.duration = myDuration;
        }
    },
    ...             
});

Answer 2

以下是我如何运作：

    ...
    auto: {
            onAfter: function (data) {
                jQuery('.desktop-arouselContainer').triggerHandler('configuration').auto.timeoutDuration = jQuery("#promo-timer", this).html() * 1000;
            }
        }
    ...

Answer 3

如果某人想要在一个页面上制作多个滑块的方法，请使用不同的timeoutDuration：

max，min - 您的最大和最小时间间隔

...
    auto: {
            onAfter: function (data) {
                        $(this).triggerHandler('configuration').auto.timeoutDuration = Math.floor(Math.random()*(max-min+1)+min);
                    }
        }
    ...

我可以在caroufredsel中为每个项目设置不同的滚动持续时间吗？

3 个答案: