Dragable carousel without jQ

by Евгений

HTML

<div class="imgSlider" id="carousel">
      <ul class="carousel">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="carousel gr">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="carousel bl">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>  
    <script>
      jscarousel(
        document.getElementById('carousel'),
        200,/*Длина картинки*/
        0/* "чувствительность" от 0 до 1*/
      );
    </script>

CSS

.imgSlider{
    border: 1px solid #dadada;
  	width: 600px;
  	height: 200px;
  	overflow: hidden;
  	position: relative;
  	
}

.imgSlider .carousel{
	list-style: none;
    margin: 0;
  	padding: 0 0;
  	height: 200px;
  	overflow: hidden;
  	width: 100%;
  	/*position: absolute;*/
  	
}
.imgSlider .carousel li{
	list-style: none;
    margin: 0;
  	padding: 0;
  	height: 150px;
    width: 150px;
    margin: 25px 25px;
    background-color: gold;
    float: left;
}
.imgSlider .carousel.gr li{
    background-color: green!important;
}
.imgSlider .carousel.bl li{
    background-color: black!important;
}

JavaScript

function addEvent(elem, type, handler){
  if (elem.addEventListener != undefined){
    elem.addEventListener(type, handler, false);
  } else if (elem.attachEvent != undefined){
    elem.attachEvent("on"+type, handler);
  }
}

function removeEvent(elem, type, handler){
  if (elem.addEventListener != undefined){
    elem.removeEventListener(type, handler, false);
  } else if (elem.detachEvent != undefined){
    elem.detachEvent("on"+type, handler);
  }
}
function fixWhich(e) {
  if (!e.which && e.button) {
    if (e.button & 1) e.which = 1;
    else if (e.button & 4) e.which = 2;
    else if (e.button & 2) e.which = 3;
  }
}

function jscarousel (elm,wh,th) {
  var u = elm.children;
  
  
  
  function abcd(e,l,c,cY) {
    e = e || event;
    var shX   = e.pageX,
        shY   = e.pageY,
        lX = Math.abs(parseInt(c.style.marginLeft) || 0),
        lY = Math.abs(parseInt(u[0].style.marginTop) || 0),
        rX,
        rY;
    function move (e) {
      e = e || event;
      rX = e.pageX - shX - lX;
      
      if (rX>0)rX=0;
      if (rX<-c.offsetWidth+elm.clientWidth)rX=-c.offsetWidth+elm.clientWidth;
      
      c.style.marginLeft = rX  + 'px';
      
      rY = e.pageY - shY - lY;
      
      if (rY>0)rY=0;
      if (rY<-u.length*c.offsetHeight+elm.clientHeight)rY=-u.length*c.offsetHeight+elm.clientHeight;
      
      cY.style.marginTop = rY  + 'px';
      e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    }
    
    
    
    
    if (document.addEventListener){document.addEventListener('mousemove', move, false);} 
    else {document.attachEvent('onmousemove', move);}
    
    
    var gX = parseInt(c.style.marginLeft) || 0;
    var gY = parseInt(cY.style.marginTop) || 0;
    function up () {
      var hX  = (parseInt(c.style.marginLeft) || 0)/wh,
          hY  = (parseInt(cY.style.marginTop) || 0)/elm.clientHeight;
      	  hX  = (gX < (parseInt(c.style.marginLeft)-wh*th || 0)) 
            ? (Math.ceil(hX) - hX) * wh 
            :...