<style type="text/css">
#demo {overflow:hidden;width:700px;white-space:nowrap}
#demo ul{display:inline;margin:0px}
#demo li{display:inline}
</style>
<div id="demo">
<ul id="demo1">
   <li><img src="http://www.awebsite.cn/demo/images/png00.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png01.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png02.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png03.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png04.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png05.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png06.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png07.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png08.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png09.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png10.png" /></li>
   <li><img src="http://www.awebsite.cn/demo/images/png11.png" /></li>
</ul>
<ul id="demo2"></ul>
</div>
<script>
<!--
var speed=5//速度数值越大速度越慢
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}
//-->
</script>