左右图片连续滚动效果
[ 2006-05-31 12:54:52 | 作者: admin ]
<html>
<head>
<title>左右滚动的图片效果 - 51windows.Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#999999">
<table border="1" width="760" align="center">
<tr>
<td width="215"> </td>
<td width="545">
<!-- 滚动代码 begin -->
<div id="demo" style="overflow:hidden;height:120px;width:543px;">
<table width="100%" cellspacing="0">
<tr>
<td id="demo1">
<table cellspacing="0" cellspacing="2">
<tr>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/mypic/sight/Pic/TN_Feng016.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/mypic/sight/Pic/TN_Feng017.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/mypic/sight/Pic/TN_Feng018.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/mypic/sight/Pic/TN_Feng019.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/mypic/sight/Pic/TN_Feng020.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/mypic/sight/Pic/TN_Feng021.JPG" border="0"/></a></td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
<!-- 滚动代码 end -->
</td>
</tr>
</table>
<script>
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth;}else{demo.scrollLeft+=2}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=631
此日志不可发表评论。
用表格解决了横向滚动的问题，高