CTAPbIu_MABP's BLOG

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

jQuery(document).ready(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>