Роман Андреевич,
css ваше видимо влияет, которое вы не указали ... а так всё должно работать.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li{
margin: 0px;
width: 100%; min-height:50px; float: left;
display: block;
}
ul {
position:relative; top: 0px; left:0px; display:block;
height:50px;
padding: 0px; margin: 0px;
}
nav{
overflow:hidden; width: 100%; height:50px; position: relative; margin: 100px auto;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var ul = $('ul'), widthAll = 0;
function slider_size() {
$("li", ul).each(function(indx, element) {
this.style.width = document.documentElement.clientWidth + "px";
widthAll += this.offsetWidth
});
ul.width(widthAll)
}
$(window).resize(slider_size).trigger("resize")
function go() {
var li = $('li:first', ul), w = li.width();
ul.delay(3000).animate({
left: -w
}, 2000, function () {
li.appendTo($(this))
$(this).css({
left: '0px'
});
go()
})
}
go()
});
</script>
</head>
<body>
<section>
<nav>
<ul>
<li id = "1" style="background-color:red;">1</li>
<li id = "2" style="background-color:green;">2</li>
<li id = "3" style="background-color:Yellow;">3</li>
<li id = "4" style="background-color:DeepPink;">4</li>
<li id = "5" style="background-color:MediumBlue;">5</li>
</ul>
</nav>
</section>
</body>
</html>
