<!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>
<style type="text/css">
body{
font-size:12px;
}
#MarqueePictues {
border:#666666 1px solid ;
text-align:center;
}
#MarqueePictues div{
margin-left:2px;
border-left:#CCCCCC 1px dashed;
text-align:center;
vertical-align:middle;
height:100px;
line-height:100px;
overflow:hidden;
width:400px;
}
img{
height:90px;
margin:5px;
border:#DDDDDD 1px dashed;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>横向滚动</title>
<script language="javascript">
function init()
{
var pics = document.getElementById("pictures").childNodes;
var length = pics.length;
ScrollPic.prototype.flag = 0;
for(var i = 0 ; i < length ; i++)
{
// 兼容FireFox.....
if(pics[i].tagName == "TD")
{
var td = document.createElement("TD");
td.innerHTML = pics[i].innerHTML;
document.getElementById("pictures").appendChild(td);
}
}
document.getElementById("pictures").onmouseover = function ()
{
ScrollPic.prototype.flag = 1;
}
document.getElementById("pictures").onmouseout = function ()
{
if(ScrollPic.prototype.flag = 1)
{
ScrollPic.prototype.flag = 0;
ScrollPic();
}
}
ScrollPic();
}function ScrollPic()
{
var layer = document.getElementById('MarqueePictues').getElementsByTagName("DIV")[0];
if(layer.scrollLeft++ == layer.scrollLeft)
{
//减去40效验图片滚动时候连接不短。自己慢慢调吧。我也不知道不同情况该减多少了........
layer.scrollLeft = layer.clientWidth/2 - 40;
}
if(ScrollPic.prototype.flag == 0)
{
setTimeout("ScrollPic()",10);
}
}
</script>
</head><body onload="init()">
<div id="MarqueePictues">
<div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr id="pictures">
<td><img src="http://bbs.javascript.com.cn/image/upload/2190.jpg" /></td>
<td><img src="http://bbs.javascript.com.cn/image/face/0.gif" /></td>
<td><img src="http://bbs.javascript.com.cn/image/upload/959.gif" /></td>
<td><img src="http://bbs.javascript.com.cn/image/upload/904.jpg" /></td>
<td><img src="http://bbs.javascript.com.cn/image/face/2.gif" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>