var t =null;

var m = 0;

var f ;

function domove()

{

var a = document.getElementById("content");

var v = (parseInt(a.style.left));

v = v + (f==true?20:-20);

if(f==true && v >= m)

{

a.style.left = m+"px";

clearTimeout(t);

}

else if(f==false && v <= m)

{

a.style.left = m+"px";

clearTimeout(t);

}

else

a.style.left = v +"px";

}

function timer(m1)

{

m = m1 ;

t = setInterval("domove()",200);

}

function left()

{

f = false;

timer(m-316);

}

function right()

{

f =true;

timer(m+316);

}

<div align="center" style="border:3px solid #0022FF;overflow:hidden;overflow-y:hidden;overflow-x:hidden;height:80px;width:400px;">

<div style="float:left;wdith:38px;height:100%" ><a  onclick="left();">&lt;-</a></div>

<div align="center" style="overflow:hidden;position:relative;border:1px solid #ff00ff;float:left;width:318px;">

<div id="content" style="overflow:hidden;position:relative;top:0px;left:0px;width:1000px;">

<ul style="padding-top:0px;margin-top:0px;padding-left:0px;margin-left:0px;float:left;list-style-type:none;width:318px;overflow:hidden;overflow-y:hidden;overflow-x:hidden">

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="1.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="1.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="1.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="1.png"></li>

</ul><ul style="padding-top:0px;margin-top:0px;padding-left:0px;margin-left:0px;float:left;list-style-type:none;width:318px;overflow:hidden;overflow-y:hidden;overflow-x:hidden">

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="2.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="2.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="2.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="2.png"></li>

</ul><ul style="padding-top:0px;margin-top:0px;padding-left:0px;margin-left:0px;float:left;list-style-type:none;width:318px;overflow:hidden;overflow-y:hidden;overflow-x:hidden">

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="3.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="3.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="3.png"></li>

<li style="padding-right:9px;float:left;list-style-type:none;"><img src="3.png"></li>

</ul>

</div>

</div>

<div style="float:left;wdith:38px;height:100%"><a onclick="right();">-&gt;</a></div>

</div>