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

 

<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");等代码

你可能感兴趣的:(跑马灯)