按钮式的左右滚动切换

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
http://www.corange.cn//uploadfiles/0920-2_58199.jpg

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值