Текущий плагин, показанный ниже, прокручивает самый верхний 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();
Однако, если прокрутить большое количество элементов, это создаст ОЧЕНЬ длинную страницу.Поэтому я пытаюсь переписать этот сценарий, чтобы он принимал параметр, который будет определять, сколько элементов отображать.Любые элементы, превышающие это число, будут скрыты до тех пор, пока они не окажутся в верхнем числе элементов «х».Вот пример того, что я пытался реализовать.
$.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);
});
};