JS 横向图片跑马灯效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff"> <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> <TBODY> <TR> <TD id=demo1 vAlign=top> <TABLE height=105 cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','1b844666f83f3838e749e220580a310e')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=圆，中考考点例析 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/1b844666f83f3838e749e220580a310e_s.gif" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/1b844666f83f3838e749e220580a310e_s.gif" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>圆，中考考点例...</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','781fdb5022a684e594a916a9a319f7c0')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=巧连半径妙解圆 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/781fdb5022a684e594a916a9a319f7c0_s.gif" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/781fdb5022a684e594a916a9a319f7c0_s.gif" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>巧连半径妙解圆</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','9827ef2f233cc1c13b5166dade3b1976')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=WordList height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/9827ef2f233cc1c13b5166dade3b1976_s.gif" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/9827ef2f233cc1c13b5166dade3b1976_s.gif" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>WordLis...</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','072c9d1b4547b0d123eda7d07031b68a')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title="带电粒子在电场中的运动 " height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/072c9d1b4547b0d123eda7d07031b68a_s.gif" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/072c9d1b4547b0d123eda7d07031b68a_s.gif" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>带电粒子在电场...</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','7ec3a6013f38fb0c19ca1b2a9a853a29')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=楞次定律演示图 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/7ec3a6013f38fb0c19ca1b2a9a853a29_s.gif" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/7ec3a6013f38fb0c19ca1b2a9a853a29_s.gif" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>楞次定律演示图</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','9be626aa408a3035cbc2a3a1890b1832')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=机翼模型 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/9be626aa408a3035cbc2a3a1890b1832_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/9be626aa408a3035cbc2a3a1890b1832_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>机翼模型</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','6a2af2600cccb5db4e5f709db86559d3')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=马德堡半球实验 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/6a2af2600cccb5db4e5f709db86559d3_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/6a2af2600cccb5db4e5f709db86559d3_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>马德堡半球实验</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','d9991038de24ab696839b1a455fc2a21')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=几种杠杆 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/d9991038de24ab696839b1a455fc2a21_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/d9991038de24ab696839b1a455fc2a21_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>几种杠杆</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','7f2bd92462a80f9c376e2c4403c1b977')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=利用摩擦 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/7f2bd92462a80f9c376e2c4403c1b977_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/7f2bd92462a80f9c376e2c4403c1b977_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>利用摩擦</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','dc619dabadbbe7f73291e4a7f727d406')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=淋巴的形成过程示意图 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/dc619dabadbbe7f73291e4a7f727d406_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/dc619dabadbbe7f73291e4a7f727d406_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>淋巴的形成过程...</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','24598412e9faa6e4b43e8936702e049f')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=花的基本结构 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/24598412e9faa6e4b43e8936702e049f_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/24598412e9faa6e4b43e8936702e049f_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>花的基本结构</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','7b630cec32592aa97d296ecdcae94bf9')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=关节模式图 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/7b630cec32592aa97d296ecdcae94bf9_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/7b630cec32592aa97d296ecdcae94bf9_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>关节模式图</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','5d2706e7dea385fa9ee54866eda931cf')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=草履虫的形态结构 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/5d2706e7dea385fa9ee54866eda931cf_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/5d2706e7dea385fa9ee54866eda931cf_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>草履虫的形态结...</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','b7074e5ac23459ce6104557e54f1b219')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=北京地铁线路图 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/b7074e5ac23459ce6104557e54f1b219_s.gif" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/b7074e5ac23459ce6104557e54f1b219_s.gif" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>北京地铁线路图</TD></TR></TBODY></TABLE></TD> <TD vAlign=top align=middle width=130> <TABLE cellSpacing=0 cellPadding=0 width=130 border=0> <TBODY> <TR> <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" onclick="javascript:showResInfo('1','50b1aa5704b61b80c248a7b1f8b9ba1f')" href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG class=bian title=不朽的故宫 height=85 src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/50b1aa5704b61b80c248a7b1f8b9ba1f_s.jpg" mce_src="欢迎访问福建教育分布式学科教研资源网群省级中心站点.files/50b1aa5704b61b80c248a7b1f8b9ba1f_s.jpg" width=115></A></TD></TR> <TR> <TD vAlign=center align=middle height=30>不朽的故宫</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD> <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV> <SCRIPT> var speed3=25//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed3) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)} </SCRIPT> </body> </html>