#scroll_pic{ background: #FFF; overflow: hidden; width: 940px; height:220px;}
#scroll_pic_in{ float: left; width: 800%; }
#scroll_pic1,
#scroll_pic2{ float: left; }
#scroll_pic1 ul li,
#scroll_pic2 ul li{ width:200px; float: left; text-align:center; margin-left:15px;}
<div id="scroll_pic"> <div id="scroll_pic_in"> <div id="scroll_pic1">
<ul>
<li>
<img alt="buffet" height="150" src="images/pic01.jpg" width="200" />
<pre>
Boat1-Boat Sushi</pre>
</li>
<li>
<img alt="buffet" height="150" src="images/pic02.jpg" width="200" /> 1284-Sea Food Low Mein.</li>
<li>
<img alt="buffet" height="150" src="images/pic03.jpg" width="200" /> 1292-Sesame Chicken</li>
<li>
<img alt="buffet" height="150" src="images/pic04.jpg" width="200" /> 1309-Seafood Dinner</li>
</ul>
</div>
<div id="scroll_pic2">
</div>
</div>
</div>
var speed=15;
var tab=document.getElementById("scroll_pic");
var tab1=document.getElementById("scroll_pic1");
var tab2=document.getElementById("scroll_pic2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab1.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};