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