Javascript 为插件实现一个参数-显示'；X'；元素数

当前插件（如下所示）向上滚动一系列具有相同类的div中最顶端的div，然后将其从容器中移除，并将其附加到系列的底部（容器内）。这给人一种垂直幻灯片放映的错觉

$.fn.rotateEach = function ( opts ) {
    var $this = this,
        defaults = {
            delay: 5000
        },
        settings = $.extend(defaults, opts),
        rotator = function ($elems) {
            $elems.eq(0).slideUp(500, function(){
                var $eq0 = $elems.eq(0).detach();
                $elems.parent().append($eq0);
                $eq0.fadeIn();

                setTimeout(function(){ rotator( $($elems.selector) ); },
                           settings.delay);
            });
        };

    setTimeout(function(){ rotator( $this ); }, settings.delay);
};

$('.dynPanelContent').rotateEach();

然而，如果有大量的元素需要滚动浏览，这将导致页面非常长。因此，我尝试重新编写这个脚本，以便它接受一个参数，该参数将决定要显示多少个元素。任何超过此数量的元素都将被隐藏，直到它们位于元素的顶部“x”数量。下面是我试图实现的一个示例

$.fn.rotateEach = function (opts) {
    var $this = this,
        defaults = {
            delay: 5000,
            //Add a parameter named elementsShown, pass in a default value of 3
            elementsShown: 3
        },
        settings = $.extend(defaults, opts),
        rotator = function ($elems) {
            //Hide the elements that are past the number to be shown
            for (i = settings.elementsShown; i <= $elems.eq; i++) {
                $elems.eq(i).hide();
            }
            $elems.eq(0).slideUp(500, function () {
                var $eq0 = $elems.eq(0).detach();
                var $eqN = $elems.eq(settings.elementsShown) - 1;
                //Check & Show the element that is now within the show range
                if ($elems.eq() == $eqN) {
                    $elems.eq($eqN).show('slow');
                }
                $elems.parent().append($eq0);
                $eq0.fadeIn();

                setTimeout(function () { rotator($($elems.selector)); },
                           settings.delay);
            });
        };

$.fn.rotateEach=函数（opts）{
var$this=这个，
默认值={
延误：5000，
//添加名为elementsShown的参数，传入默认值3
元素显示：3
},
设置=$.extend（默认值、选项），
旋转器=功能（$elems）{
//隐藏超过要显示的数字的元素
对于（i=settings.element）shown；i您可以使用简单的CSS来实现，伙计。

如果您的元素都具有相同的高度（这是您的问题必须假设的：如果您动态地旋转一大堆东西，您将不希望页面更改高度），则根本不需要使用JavaScript。只需将容器的高度设置为所需的高度并隐藏溢出。然后，当您删除和附加时，一切都会正常工作。不过，这不会考虑您的动态配置。
改进的插件：

注意事项：


增加了对显示X元素的支持
增加了对仅旋转某些元素的支持
增加了对停止旋转的支持：

在X毫秒后停止
旋转X圈后停止

overflow-y:hidden
动态添加到容器中
简化了您的分离/连接

已知问题：


显示X元素不会检查最大值
您的问题/问题是什么？添加了另一个答案，通过插件实现了这一点。我确实对插件进行了一些改进。许多新功能都是可选的。啊，谢谢。我总是忽略这类事情。尽管找到真正的答案会很好。可以在脚本中添加方便的功能。（：我正在做这件事，但是我被打断了。如果有人没有回答，我以后会再调查。