视频播放滚动条（最终完善版）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖动效果</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style-type:none;}
img{border:0;}
a{color:#ccc;text-decoration:none;}
a:hover{color:#ccc;text-decoration:underline;}
.wrapper{position:relative;800px;height:180px;overflow:hidden;margin:0 auto;border:1px solid #ccc;}
.wrapper .videoContent{position:absolute;top:10px;left:0;height:150px;}
.videoContent li{float:left;}
.videoContent a{display:block;100px;height:100px;margin-right:10px;border:1px solid red;vertical-align:middle;text-align:center;line-height:100px;}
.wrapper .btnDiv{position:absolute;left:0;bottom:20px;100%;height:6px;background:#000;cursor:pointer;overflow:hidden;}
.wrapper .btn{position:absolute;left:0;bottom:13px;40px;height:20px;border:0;background:blue;cursor:pointer;overflow:hidden;}
.pre{display:block;position:absolute;top:40px;left:0;30px;height:20px;background:#ccc;line-height:20px;cursor:pointer;}
.next{display:block;position:absolute;top:40px;right:0px;30px;height:20px;background:#ccc;line-height:20px;cursor:pointer;}
</style>
</head>

<body>
<div class="wrapper" id="wrapper">
    <ul id="videoContent" class="videoContent">
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
        <li><a href="#" target="_blank">拖动的内容</a></li>
    </ul>
    <div class="btnDiv" id="btnDiv"></div>
    <div class="btn" id="btn">拖动</div>
    <span class="pre" id="pre">《《</span>
    <span class="next" id="next">》》</span>
</div>
<script type="text/javascript">
window.onload = function(){
    var oWrapper = getId("wrapper");
    var btnDiv = getId("btnDiv");
    var pre = getId("pre");
    var next = getId("next");
    var oUl = getDom("ul",oWrapper)[0];
    var oLi = oUl.getElementsByTagName("li");
    var oLiLength = oLi.length;
     var oBtn = getId("btn");
    var disX = 0,step=0,moveLeft=0,timer = null;
    // oUl width
    oUl.style.width = oLiLength * oLi[0].offsetWidth + "px";
     // 检测溢出的li 是否大于滚动条的总宽度;
    var scrWidth = oWrapper.clientWidth - (oUl.offsetWidth - oWrapper.clientWidth);
    if(scrWidth > 0){
        oBtn.style.width = scrWidth + "px";
    }else{
        step = Math.abs( (oUl.offsetWidth - oWrapper.clientWidth)/(oWrapper.clientWidth-40) );
        oBtn.style.width = "40px";
    }
    // 开始拖动
    oBtn.onmousedown = function(event){
        var oEvent = event || window.event;
        var oPageX = oEvent.layerX?oEvent.layerX:oEvent.offsetX;
        disX = oWrapper.offsetLeft + oPageX;
        document.onmousemove = function(event){
            var oEvent = event || window.event;
            moveLeft = oEvent.clientX - disX;
            dragMove(moveLeft);
        }
        if(oEvent.stopPropagation){
            oEvent.stopPropagation();
        }else{
            oEvent.cancelBubble = true;
        }
    }
    pre.onmousedown = function(event){
        timer = setInterval(function(){
              moveLeft-=10;
           dragMove(moveLeft);
        },80)
    }
    pre.onmouseup = function(){
       clearInterval(timer);
       moveLeft-=10;
       dragMove(moveLeft);
    }
    next.onmousedown = function(event){
       timer = setInterval(function(){
           moveLeft+=10;
           dragMove(moveLeft);
       },80);
    }
    next.onmouseup = function(){
       clearInterval(timer);
       moveLeft+=10;
       dragMove(moveLeft);
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
    btnDiv.onclick = function(event){
        var oEvent = event || window.event;
        var otarget = oEvent.target?oEvent.target:oEvent.srcElement;
        if(otarget.id == "btnDiv"){
            var oPageX = oEvent.layerX?oEvent.layerX:oEvent.offsetX;
        }
        moveLeft = oPageX;
        dragMove(oPageX)
        if(oEvent.stopPropagation){
            oEvent.stopPropagation();
        }else{
            oEvent.cancelBubble = true;
        }
    }
    function dragMove(moveLeft){
        if(moveLeft<0){
            oBtn.style.left = "0px";
            oUl.style.left = "0px";
        }else if(moveLeft>(oWrapper.clientWidth-oBtn.offsetWidth)){
            moveLeft = oWrapper.clientWidth-oBtn.offsetWidth;
        }else{
            oBtn.style.left = parseInt(moveLeft) + step + "px";
            if(step==0){
                oBtn.style.left = parseInt(moveLeft) + "px";
                oUl.style.left = - parseInt(moveLeft) + "px";
            }else{
                oBtn.style.left = parseInt(moveLeft) + step + "px";
                oUl.style.left = -(parseInt(moveLeft) * step) + "px";
            }
        }
    }
}
function getStyle(obj,attr){
    return obj.currentStyle?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);
}
function getDom(dom,obj){
    var obj = obj || document;
    return obj.getElementsByTagName(dom);
}
function getId(id){
    return document.getElementById(id);
}
</script>
</body>
</html>