代码如下：
<!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=gb2312" />
<title>测试</title>
<style type="text/css">
ul, li, img, td { font-size: 12px; list-style-type: none; text-align: center; margin: 0; padding: 0; }
.demo { width: 230px; margin-bottom: 8px; height: 172px; overflow: hidden; }
.demo ul { width: 408px; clear: both; }
.demo li { width: 102px; float: left; text-align: center; }
.demo img { margin-bottom: 8px; }
</style>
</head>
<body>
<div class="demo" id="demo1">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<ul>
<li>
<img src="images/005.jpg"><br>
滚动图5</li>
<li>
<img src="images/006.jpg"><br>
滚动图6</li>
<li>
<img src="images/007.jpg"><br>
滚动图7</li>
<li>
<img src="images/008.jpg"><br>
滚动图8</li>
</ul>
</td>
</tr>
</table>
</div>
<!--第二个滚动图开始-->
<div class="demo" id="demo2">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<ul>
<li>
<img src="images/001.jpg"><br>
滚动图1</li>
<li>
<img src="images/002.jpg"><br>
滚动图2</li>
<li>
<img src="images/003.jpg"><br>
滚动图3</li>
<li>
<img src="images/004.jpg"><br>
滚动图4</li>
</ul>
</td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
function startmarquee(lh, speed, delay, index)
{
var o = document.getElementById("demo" + index);
var o_td = o.getElementsByTagName("td")[0];
var str = o_td.innerHTML;
var newtd = document.createElement("td");
newtd.innerHTML = str;
o_td.parentNode.appendChild(newtd);
var t;
var p = false;
o.onmouseover = function()
{
p = true;
}
o.onmouseout = function()
{
p = false;
}
function start()
{
t = setInterval(Marquee, speed);
if (!p)
{
o.scrollLeft += 3;
}
}
function Marquee()
{
if (o_td.offsetWidth - o.scrollLeft <= 0)
{
o.scrollLeft -= o_td.offsetWidth;
}
else
{
if (o.scrollLeft % lh != 0)
{
o.scrollLeft += 3
}
else
{
clearInterval(t);
setTimeout(start, delay);
}
}
}
setTimeout(start, delay);
}
startmarquee(102, 1, 1500, 1);
startmarquee(102, 30, 1, 2); //图片不间断滚动
</script>
</body>
</html>
效果图如下：
