仿制视频播放滚动条效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12313</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:0;}
a{text-decoration:none;}
.wrapper{position:relative;600px;height:140px;margin:0 auto;border:1px solid red;overflow:hidden;}
.wrapper ul{position:absolute;top:4px;left:0;height:100px;}
.wrapper ul li{float:left;padding-right:20px;line-height:100px;text-align:center;}
.wrapper ul li a{display:block;100px;height:100px;background:#ccc;}
.lineDiv{position:relative;height:1px;overflow:hidden;}
.lineBtn{position:absolute;top:110px;left:0;80px;height:20px;background:#c9b07b;text-align:center;line-height:20px;cursor:pointer;}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
   <ul>
       <li><a href="#" target="_blank">1111</a></li>
       <li><a href="#" target="_blank">1111</a></li>
       <li><a href="#" target="_blank">1111</a></li>
       <li><a href="#" target="_blank">1111</a></li>
       <li><a href="#" target="_blank">1111</a></li>
       <li><a href="#" target="_blank">1111</a></li>
       <li><a href="#" target="_blank">1111</a></li>

   </ul>
   <div class="lineBtn" id="lineBtn">btn</div>
</div>
<script type="text/javascript">
window.onload = function(){
    var owrapper = getId("wrapper");
   var olineBtn = getId("lineBtn");
   var oLi = getDom("li",owrapper)
    owrapper.children[0].style.width = oLi.length*oLi[0].offsetWidth + "px";
   var owLeft = owrapper.offsetLeft;
   olineBtn.style.width = owrapper.children[0].clientWidth - owrapper.clientWidth +"px";
   var disX = 0;
   olineBtn.onmousedown = function(e){
      var oEvent = e || event;
      var curWidth = oEvent.layerX?oEvent.layerX:oEvent.offsetX;
      disX = owrapper.offsetLeft + curWidth;
      document.onmousemove = function(e){
          var oEvent = e || event;
          var moveLeft = oEvent.clientX - disX;
          document.title = moveLeft;
          if(moveLeft <= 0 ){
              moveLeft = 0;
          }else if(moveLeft >= owrapper.clientWidth-olineBtn.clientWidth ){
              moveLeft = parseInt(owrapper.clientWidth-oLi.clientWidth)+1+"px";
          }
          olineBtn.style.left = moveLeft + "px";
          owrapper.children[0].style.left = - moveLeft + "px";
      }
   }
   document.onmouseup = function(){
       document.onmousemove = null;
   }
}
function getStyle(obj,attr){
   return obj.currentStyle?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);
}
function getDom(dom,obj){
   obj = obj || document;
   return obj.getElementsByTagName(dom);
}
function getId(id){
   return document.getElementById(id)
}
</script>
</body>
</head>
</html>