请问水平滚动怎么做？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ padding:100px;}
#moocBox{width:600px; height:126px;border:1px solid #000; overflow:hidden;}
#moocBox ul{ width:1800px;list-style:none;}
#moocBox ul li{ width:150px; float:left; text-align:center;}
</style>
</head>
<body>
<div id="moocBox">
<ul id="con1">
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
</ul>
<ul id="con2">
</ul>
</div>
<script>
var area=document.getElementById("moocBox");
var con1=document.getElementById("con1");
var con2=document.getElementById("con2");
con2.innerHTML=con1.innerHTML;
area.scrollLeft=0;
var spend=100;
function tab(){
if(area.scrollLeft>=con1.scrollWidth){
area.scrollLeft=0;
}else{
area.scrollLeft++;
}
}
setInterval('tab()','spend')
</script>
</body>
</html>
