Вертикальная "карусель"

[andy_gold]

Добрый день всем. Вопрос возник следующий. Каким образом лучше всего сделать вертикальный слайдер? При том что в видимую часть должны попадать сразу 3 элемента, то есть, тот что первый в массиве ссылок на картинки по средине, а первый видимый в столбике - это последний элемент в массиве. Что бы создавалось впечатление, что это барабан какой то.

И еще вопрос, как в jquery сделать повтор анимации определенное время. Например.

$( ".clicker" ).click(function() {
//Start
$(".main").animate({
top: "+=100px"
}, 500, function(){
$(".main").css("top", 0);
})
//Finish
})

Только что бы блок от Start до Finish повторялся по кругу ровно 5 секунд. Спасибо если кто откликнется.

[dmitry]

@andy_gold

Каким образом лучше всего сделать вертикальный слайдер? При том что в видимую часть должны попадать сразу 3 элемента, то есть, тот что первый в массиве ссылок на картинки по средине, а первый видимый в столбике - это последний элемент в массиве.

Перед анимацией надо клонировать узел, который будет появляться последним. После окончания анимации удалить узел, который был прототипом для клонирования.

@andy_gold

И еще вопрос, как в jquery сделать повтор анимации определенное время

Запоминать сколько времени анимация была запущена, и на основании этой информации принимать решение о запуске или не запуске анимации повторно:

var MAX_ANIMATION_LAPSE = 5000;
var timeLapsed = 0;
var prevAnimationStartedAt;
function startAnimation() {
	prevAnimationStartedAt = Date.now();
	$(".main").animate({
		top: "+=100px"
	}, 500, function() {
		$(".main").css("top", 0);
		timeLapsed += Date.now() - prevAnimationStartedAt;
		if (timeLapsed < MAX_ANIMATION_LAPSE) {
			startAnimation();
		}
	});
}

[andy_gold]

Спасибо, шикарно. Разобрался, просто сразу хотелось обойтись без Date().

[dmitry]

@andy_gold

хотелось обойтись без Date().

Можно считать количество прокруток слайдера. Будет точно такая же структура кода. Субъективно мне такой подход нравится меньше, хотя привести серьезных аргументов чем он плох, я не могу.