<!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=utf-8" /><title>分享一个横向图文无缝滚动的代码，全兼容</title></head><body><style type="text/css"><!--ul,li,div{margin:0; padding:0; font-size:12px;}#demo { width:678px; float:left; overflow:hidden;height:144px; border:none;}#indemo { float: left;width: 800%;}#demo1,#demo2{height:144px;float:left; display:inline-table;}#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}#demo1 { float: left;}#demo2 { float: left;.lmboxb ul { margin-left:12px; margin-top:5px; }.lmboxb ul li {}.lmboxb ul li a { line-height:24px;}}--></style><div id="demo"><div id="indemo"><div class="lmboxb" id="demo1"><ul><li> <div></div> <div><a href="#">春季女性补血食谱</a></div></li><li> <div></div> <div><a href="#">大枣木耳汤 神情气爽</a></div></li><li> <div></div> <div><a href="#">春季女性补血食谱</a></div></li><li> <div></div> <div><a href="#">大枣木耳汤 神情气爽</a></div></li><li> <div></div> <div><a href="#">大枣木耳汤 神情气爽</a></div></li></ul></div><div id="demo2"></div></div></div><div style="width:100%;"></div><script><!--var speed=20; //数字越大速度越慢var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{ tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.οnmοuseοver=function() {clearInterval(MyMar)};tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};--></script></body></html>