今天研究了一下图片滚动,网上有很多可以使用的例子,所以先是找了一个用的是表格布局的,如下:
这个滚动效果可以使用,但是表格布局现在一般不用,而且这个例子的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="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 = 30gpic2.innerHTML = gpic1.innerHTMLfunction Marquee() {if (gpic2.offsetWidth - gpic.scrollLeft <= 0)gpic.scrollLeft -= gpic1.offsetWidthelse {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><!-- 临时或重点信息发布(滚动)【结束】 -->