演示效果：http://bbs.blueidea.com/thread-2762084-1-1.html
<!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>家园网 www.wfamilies.com</title>
<style type="text/css">
*{
*
margin:0;padding:0;
}body{background:#CCC;}/*--大块定义--*/#container{text-align:left;width:778px;overflow:hidden;background:#fff;}#content{width:778px;}/*--休闲一刻--*/#xxyk{float:left;width:778px;margin:0;padding:0;background:#999;}#xxyk .content{float:left;width:778px;margin:0;padding:0 0 20px 0;}#xxyk .content img{border:0;}#xxyk .content .roll{width: 750px;margin:4px auto;padding:0 0 0 0; overflow:hidden;}#xxyk .content .roll #main{list-style:none;width:1620px;padding:0;margin:0;}#xxyk .content .roll #main #pic1,#xxyk .content .roll #main #pic2{float:left;text-align:left;width:810px;padding:0;margin:0;background:#f90;}#xxyk .content .roll #main #pic1 a,#xxyk .content .roll #main #pic2 a{display:block;text-align:center;color:#FFFFFF;width:135px;}#xxyk .content .roll #main #pic1 img,#xxyk .content .roll #main #pic2 img{display:block;clear:both;width:115px;height:111px;margin:0 auto 5px auto;padding:0;}#xxyk .content .roll #main #pic1 ul,#xxyk .content .roll #main #pic2 ul{float:left;list-style:none;}#xxyk .content .roll #main #pic1 ul li,#xxyk .content .roll #main #pic2 ul li{float:left;display:block;margin:0;padding:0;}/*--隐藏元素--*/#slhdly .title,#xxyk .content ul li.more{position:absolute;visibility:hidden;overflow:hidden;display:none;clip:rect(0,0,0,0);height:0;
}</style></head><body><div id="xxyk"><div class="content"><div id="pic" class="roll"><div id="main"><div id="pic1"><ul><li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li><li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li><li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li><li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li><li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li><li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li></ul></div><div id="pic2"></div></div></div><script type="text/javascript"> var spe=22; /*--控制移动速度--*/ var m = document.getElementById("pic"); var m1 = document.getElementById('pic1'); var m2 = document.getElementById('pic2'); m2.innerHTML = m1.innerHTML; function Marquee() { if(m2.offsetWidth-m.scrollLeft<=0) { m.scrollLeft-=m1.offsetWidth; } else { m.scrollLeft++; } } var k1; function startmarquee() { k1=setInterval(Marquee,spe) } window.setTimeout('startmarquee()',1000); m.onmouseover=function() {clearInterval(k1)} m.onmouseout=function() {k1=setInterval(Marquee,spe)} </script></div></div></body></html>