Бесконечная карусель

Вот такая забавная каруселька. Плавная прокрутка происходит за счет скролла внутренностей контейнера (scrollLeft), а зацикливание за счет того что первый элемент, после прокрутки становиться в конец карусели. С другой стороны на каждой анимации происходит работа с DOM деревом, что не есть хорошо, но впринципе на это навалить.


jQuery(function($){
	setInterval(function (){
		var marquee = $("#carousel");
		marquee.animate({scrollLeft:marquee.children(":first").width()},{
			duration : "slow",
			complete : function(){
				marquee.scrollLeft(0).children(":first").appendTo(marquee);
			}
		});
	},3000);
});

#carousel{
	height: 50px;
	overflow: hidden;
	white-space: nowrap;
	width: 600px;
}
#carousel span {
	display: inline-block;
	height: 50px;
	width: 250px;
	overflow: hidden;
}

<div id="carousel">
	<span style="background-color:red;"></span>
	<span style="background-color:orange;"></span>
	<span style="background-color:yellow;"></span>
	<span style="background-color:green;"></span>
	<span style="background-color:cyan;"></span>
	<span style="background-color:blue;"></span>
	<span style="background-color:purple;"></span>
</div>

19 Комментарии “Бесконечная карусель

  1. Когда элементов меньше чем может быть на экране (или вровень) то будет, наверное, не очень красиво.

    Я такие же штуки обычно делал так: при инициализации первый элемент копировал в конец, а последний в начало. В итоге на границе после анимации просто резко прыгал с начала на конец.

  2. Просто и понятно. Думаю, найду применение подобной карусельки в одном из следующих проектов. Лицензия? Или пох?

  3. remove можно убрать, appendTo уже должен _переместить_ узел в конец.

  4. ыыы, а как duration управлять? вместо slow подставляю циферки — не реагирует :(

  5. пристраиваю в одном проекте — заказчику потребовался слайдер. от дефолтной скорости в недоумении — не успевает прочесть буковки на слайдах!

  6. блин, это называется — смотрю в упор на параметр и не вижу его!
    спасибо!

  7. кстати, в ie8 получается портянка : http://bit.ly/aEKyKo вот такая, та же шняга в ослике с проектом, который уже вывалил заказчику :(
    в иных прочих не тестил… как-то лечится?

  8. мдя, хуевинька. я попробовал поставить их всех в один ряд — после этоо они перестали анимироваться

Комментарии закрыты