var b=0;
var a=document.getElementsByClassName('slide');
var ul=document.getElementsByClassName('dd');
var z=document.getElementsByClassName('wrapper');
var halfBlock = (960/2) ;
var coord;
var ppx;
var computedStyle;
var currentLeft;


for(var i=0 ;i<a.length; i++) {
    b = a[i].offsetWidth + b;
}
ul[0].style.width = b + "px";

for(var i=0; i<a.length; i++) {
    (function() {
	var j = i;
	a[i].onclick = function() {
	    coord = a[j].getBoundingClientRect();
            if(coord.left < halfBlock) {
		var  timerLeft = setInterval( function(){
		    coord = a[j].getBoundingClientRect();
		    ul[0].style.left = 4 + ppx + "px";
		    computedStyle = getComputedStyle(ul[0]);
		    currentLeft = computedStyle.left;
		    ppx = Number(currentLeft.slice(0, currentLeft.indexOf("px")));
		    if(coord.left >= halfBlock - coord.width / 2 ) {
			
			clearInterval(timerLeft);
			
		    }
		},4)
	    } else {
		var  timerRight = setInterval( function(){
		    coord = a[j].getBoundingClientRect();
		    ul[0].style.left = -4 + ppx + "px";
		    computedStyle = getComputedStyle(ul[0]);
		    currentLeft = computedStyle.left;
		    ppx = Number(currentLeft.slice(0, currentLeft.indexOf("px")));
		    if(coord.left <= halfBlock - coord.width / 2 ) {
			
			clearInterval(timerRight);
		    }
		},4)
		
	    }
	}
    })();
    
    
}

if(coord.left < halftBlock) {
    setInterval(timerLeft)
} else {
   setInterval(timerRight)
}
function timerLeft() {
        //...my code
    }
function timerRight() {
        //...my code
    }

if(coord.left < halftBlock) {
    var l = setInterval(timerLeft);
} else {
   var r = setInterval(timerRight);
}
function timerLeft() {
//...my code
        clearInterval(l);
    }
function timerRight() {
//...my code
         clearInterval(r);
    }