<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<wraper>
<ul id="ul">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
<li>EE</li>
<li>FF</li>
<li>AA</li>
<li>BB</li>
<li>CC</li
<li>DD</li>
<li>EE</li>
</ul>
</wraper>
</body>
</html>
wraper{
display:block;
background-color:red;
width:200px;
overflow:hidden;
position:relative;
height:100px;
}
ul{
width:490px;
position:absolute;
left:0px;
right:0px;
top:0px;
height:20px;
bottom:20px;
display:block;
}
li{
float:left;
width:45px;
}
var x=document.getElementById('ul');
setInterval(function(){
var left=x.style.left.replace('px','');
if(left<-290)
{
left=-30;
}
x.style.left=left-10+'px';
},100);
JS Bin on jsbin.com