<script type="text/javascript">
</script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title> 一个按钮式的左右滚动切换 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-cn">
</head>
<style type="text/css">
.outerDiv{
overflow: hidden;
height: 100px;
width: 200px;
}
.innerTable{
height: 100px;
width: 1000px;
}
</style>
<script language="javascript">
<!--
i=40;
var scrollObj;
function scroll(objid, a){
scrollObj = document.getElementById(objid);
if(i){scrollObj.scrollLeft+=5*a;i--;setTimeout("scroll('"+objid+"', "+a+")",10);}else i=40;
}
//-->
</script>
<body>
<div class="outerDiv" id="a1">
<table class="innerTable">
<tr>
<td><img src="http://www.soojs.com/images/logo.gif"></td>
<td><img src="http://www.soojs.com/images/logo.gif"></td>
<td><img src="http://www.soojs.com/images/logo.gif"></td>
<td><img src="http://www.soojs.com/images/logo.gif"></td>
<td><img src="http://www.soojs.com/images/logo.gif"></td>
</tr>
</table>
</div>
<button id="l" onClick="scroll('a1', -1)">left</button>
<button id="r" onClick="scroll('a1', 1)">right</button>
<hr>
<div class="outerDiv" id="a2">
<table class="innerTable">
<tr>
<td>1111111111111</td>
<td>2222222222222</td>
<td>3333333333333</td>
<td>4444444444444</td>
<td>5555555555555</td>
</tr>
</table>
</div>
<button id="l" onClick="scroll('a2', -1)">left</button>
<button id="r" onClick="scroll('a2', 1)">right</button>
</body>
</html>