CTAPbIu_MABP's BLOG

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

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

#сontainer{
	overflow:hidden;
	white-space:nowrap;
}
#сontainer div {
	display:inline-block; 
	width:250px; 
	height:50px;
}

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