<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.Block {
width: 400px; height:200px; float: left;
}
#Blocks {
width: 1200px; height:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
function go() {
$('#Blocks').delay(3000).animate({
left: '-=400'
}, 2000, function () {
$('.Block:first').appendTo($(this))
$(this).css({
left: '0px'
});
go()
})
}
go()
})
</script>
</head>
<body>
<div style="overflow:hidden; width: 400px; height:200px; position: relative ">
<div id="Blocks" style="position:absolute; top: 0px; left:0px;" >
<div class ="Block" id = "1" style="background-color:red;">1</div>
<div class ="Block" id = "2" style="background-color:green;">2</div>
<div class ="Block" id = "3" style="background-color:Yellow;">3</div>
</div>
</div>
</body>
</html>