无缝滚动的实现

<div id="container">
  <ul id="imgs">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <div id="arrows">
    <span id="left">&lt;&lt;向左</span>
    <span id="right">向右&gt;&gt;</span>
    <span id="stop">停止&gt;&gt;</span>
  </div>
</div>

*{
  padding: 0;
  margin: 0;
}
ul{
  list-style: none;
}
#container{
  width: 380px;
  height: 200px;
  border:1px solid #000;
  margin: 50px auto;
  overflow: hidden;
  position: relative;
}
#imgs{
  width: 520px;
  height: 120px;
  position: absolute;
}
#imgs li{
  width: 120px;
  height: 120px;
  float: left;
  text-align: center;
  line-height: 120px;
  margin-right: 10px;
  background: #000;
  color: #fff;
}
#arrows{
  width: 270px;
  height: 40px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -90px;
}
#arrows span{
  margin-right: 10px;
  width: 80px;
  height: 40px;
  float: left;
  background: grey;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}

//1.复制#imgs中的图片
var oImgs = document.getElementById("imgs");
oImgs.innerHTML += oImgs.innerHTML;
//console.log(oImgs.innerHTML);

//2.设置#imgs的宽度
var aLi = oImgs.getElementsByTagName("li");
//alert(aLi[0].offsetWidth);
oImgs.style.width = ((aLi[0].offsetWidth+10) * aLi.length) + 'px';
oImgs.style.height = 120 +'px';
//alert(oImgs.offsetWidth);
var timer;
var speed = 2;
//3.移动#imgs

timer = setInterval(function(){
  oImgs.style.left = oImgs.offsetLeft + speed + 'px';
  //alert(oImgs.offsetWidth/2+aLi.offsetWidth);
  if(oImgs.offsetLeft <= -(oImgs.offsetWidth/2)){  //临界值
    oImgs.style.left = 0;
  }
  if(oImgs.offsetLeft > 0){  //不能大于等于0
    oImgs.style.left = -oImgs.offsetWidth/2 + 'px';
  }
},30);


var oLeft = document.getElementById("left");
var oRight = document.getElementById("right");


oLeft.onmouseover = oRight.onmouseover = function(){
  if(this == oLeft){
    speed = -2;
  }else{
    speed = 2;
  }
};

var oStop = document.getElementById("stop");
oStop.onclick = function(){
    clearInterval(timer);
};