Implementing a Parameter to a plugin - Shows 'X' number of elements

The current plugin, shown below, scrolls the top-most div in a series of divs with the same class upwards, then removes it from the container, and appends it to the bottom of the series (within the container). This gives the illusion of a vertical slideshow.

$.fn.rotateEach = function ( opts ) {
    var $this = this,
        defaults = {
            delay: 5000
        },
        s开发者_开发知识库ettings = $.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();

However, if there are a large number of elements to scroll through, this would make for a VERY long page. As such, I am attempting to re-write this script so that it accepts a parameter which will determine how many elements to display. Any elements exceeding this number will be hidden until they are in the top 'x' number of elements. Here is an example of what I have attempted to implement.

$.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);
            });
        };

You can use simple CSS for this, mate.

If your elements are all of the same height (which your problem has to assume: if you are rotating a whole bunch of things dynamically, you won't want your page to change height), then you don't really need to use JavaScript for this at all. Just set the height of the container to what you want and hide the overflow. Then when you remove and append, everything appears to work. This won't take care of your dynamic configuration, though.

Improved plug-in: http://jsfiddle.net/morrison/tTJaM/

Notes:

• Added support for showing X elements.
• Added support for rotating only certain elements.
• Added support for stopping the rotations:
  • Stop after X milliseconds.
  • Stop after X rotations.
• overflow-y:hidden is added to container dynamically.
• Simplified your detaching/attaching.

Known Issues:

• Displaying X elements doesn't check for a maximum.