同时包含图片及文字的跑马灯代码

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="roll1" style="OVERFLOW:hidden; WIDTH:450px;">
		<table>
			<tr>
				<td id="rollleft1">
					<table>
						<tr>
							<td><div><a href="#"><img/>1111111111111111</a></div></td>
							<td>2222222222222222</td>
							<td>3333333333333333</td>
							<td>4444444444444444</td>
						</tr>      
					</table>
				</td>
				<td id="rollright1"> </td>
			</tr>
		</table>
	</div>
	<script language="JavaScript" type="text/JavaScript">
		var speed1 = 22;
                var rollright1 = document.getElementById("rollright1");
                var rollleft1 = document.getElementById("rollleft1");
                var roll1 = document.getElementById("roll1");
		rollright1.innerHTML = rollleft1.innerHTML;
		function Marquee1() {
			if (rollright1.offsetWidth - roll1.scrollLeft <= 0) {
				roll1.scrollLeft -= rollleft1.offsetWidth;
			} else {
				roll1.scrollLeft++;
			}
		}
		var MyMar1 = setInterval(Marquee1, speed1);
		roll1.onmouseover = function() {clearInterval(MyMar1);}
		roll1.onmouseout = function() {MyMar1 = setInterval(Marquee1, speed1);}
	</script>                       
</body>
</html>

由于该段代码是以id=rollleft1的td为整体平移,因此在该td下可加div框架,如此就可实现同时包含图片及文字的跑马灯效果

PS:之前没有注意W3C标准的问题,要符合W3C标准,必须严格定义每一个变量,因此要增加var rollright1 = document.getElementById("rollright1");等代码

原文地址:https://www.cnblogs.com/eagley/p/1769901.html