今天研究了一下图片滚动，网上有很多可以使用的例子，所以先是找了一个用的是表格布局的，如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="gpic" style="overflow: hidden; width: 600px; height: 182px;">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="gpic1" valign="top" align="center">
<table width="974" border="0" align='center' cellpadding="0" cellspacing="0">
<tr>
<td height="120" bgcolor="#FF00FF">图片/链接1</td>
<td valign='top' bgcolor="#00FFFF">图片/链接2</td>
<td valign='top' bgcolor="#FFFF00">图片/链接3</td>
<td valign='top' bgcolor="#0000FF">图片/链接4</td>
<td valign='top' bgcolor="#00FF00">图片/链接5</td>
<td valign='top' bgcolor="#FF0000">图片/链接6</td>
</tr>
<tr>
<td height="24" align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
</tr>
</table>
</td>
<td id="gpic2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed = 30
gpic2.innerHTML = gpic1.innerHTML
function Marquee() {
if (gpic2.offsetWidth - gpic.scrollLeft <= 0)
gpic.scrollLeft -= gpic1.offsetWidth
else {
gpic.scrollLeft++
}
}
var MyMar = setInterval(Marquee, speed)
gpic.onmouseover = function () { clearInterval(MyMar) }
gpic.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
</body>
</html>
这个滚动效果可以使用，但是表格布局现在一般不用，而且这个例子的onmouseover和onmouseout在频繁的setInterval；
个人感觉可以使用布尔变量true和false来控制，停止还是继续滚动。
自己改写如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="PicWall" style="width: 200px; overflow: hidden; white-space: nowrap;">
<div id="InnerPic" style="display: inline; width: 200px;">
<img src="a.jpg" alt="img-1" />1
<img src="a.jpg" alt="img-2" />2
<img src="a.jpg" alt="img-3" />3
<img src="a.jpg" alt="img-4" />4
<img src="a.jpg" alt="img-5" />5
</div>
<div id="InnerPic2" style="display: inline; width: 200px;"></div>
</div>
<script>
var speed = 30;
var scroll = true;
InnerPic2.innerHTML = InnerPic.innerHTML;
function Marquee() {
if (scroll) {
if (InnerPic2.offsetWidth - PicWall.scrollLeft <= 0) {
PicWall.scrollLeft -= InnerPic.offsetWidth;
} else {
PicWall.scrollLeft++;
}
}
}
var MyMarquee = setInterval(Marquee, speed);
PicWall.onmouseover = function () { scroll = false; }
PicWall.onmouseout = function () { scroll = true; }
</script>
</body>
</html>
另外有些了一个文字上下滚动
<!-- 临时或重点信息发布（滚动）【开始】 -->
<div id="TextWall" style="overflow: hidden; border: 1px solid #2aff00; height: 230px;">
<div id="InnerText" style="word-wrap: break-word;">
信息：
<br />
1、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br />
2、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br />
3、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br />
4、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br />
</div>
<div id="InnerText2" style="word-wrap: break-word;"></div>
</div>
<script>
var textSpeed = 30;
var textScroll = true;
InnerText2.innerHTML = InnerText.innerHTML;
function TextMarquee() {
if (textScroll) {
if (InnerText.offsetHeight - TextWall.scrollTop <= 0) {
TextWall.scrollTop -= InnerText.offsetHeight;
} else {
TextWall.scrollTop++;
}
}
}
var MyTextMarquee = setInterval(TextMarquee, textSpeed);
TextWall.onmouseover = function () { textScroll = false; }
TextWall.onmouseout = function () { textScroll = true; }
</script>
<!-- 临时或重点信息发布（滚动）【结束】 -->
