請問水平滾動(dòng)怎么做?
<!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>無標(biāo)題文檔</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>