<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="###"><img src="images/1.jpg" border="0" /></a>
<a href="###"><img src="images/2.jpg" border="0" /></a>
<a href="###"><img src="images/3.jpg" border="0" /></a>
<a href="###"><img src="images/4.jpg" border="0" /></a>
<a href="###"><img src="images/5.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
#demo {background: #FFF;overflow:hidden;width: 500px;margin:0 auto;}
#demo img {margin:3px;float: left;width: 200px;}
#indemo {float: left;width: 800%;}
#demo1 {float: left;}
#demo2 {float: left;}
<script type="text/javascript" language="javascript">
var speed = 10;
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.offsetWidth
else {
tab.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function () { clearInterval(MyMar) };
tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
</script>