* adaptado para banners 120x60
JAVASCRIPT
<script language="JavaScript" type="text/javascript">
function THEScroller(ulId, speed) {
this.container = document.getElementById(ulId);
this.container.Scroller = this;
this.speed = speed;
this.scroll = function() {
var c = this.container.firstChild;
var first = null;
while (c) {
if (c.tagName == 'LI') {
first = c;
break;
}
c = c.nextSibling;
}
var nodeSize = 78; // Default
var px = 0;
nodeSize = first.clientWidth;
if (first.style.marginLeft != '') {
px = parseInt(first.style.marginLeft);
}
first.style.marginLeft = ( px - 1 ) + 'px';
if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) {
first.style.marginLeft = '0px';
this.container.removeChild(first);
this.container.appendChild(first);
}
setTimeout('document.getElementById(\'' + this.container.id + '\').Scroller.scroll()', this.speed);
}
setTimeout('document.getElementById(\'' + ulId + '\').Scroller.scroll()', this.speed);
}
</script>
CSS
<style type="text/css">
.scrolling_logos {
border:1px solid #cccccc;
padding:11px 15px;
width:870px;
}
#scroller {
width: 870px;
height: 65px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
overflow: hidden;
}
#scroller li {
float: left;
height: 120px;
width: 78px;
margin: 0;
padding: 3px;
}
#scroller li img {
margin: 0;
padding: 0;
}
</style>
HTML
<div class="scrolling_logos">
<ul id="scroller">
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
<li><img src="http://www.codigosnaweb.com/banner120.gif"></li>
</ul>
<script language="javascript" type="text/javascript">THEScroller('scroller', 60, 'horizontal');</script>
</div>