Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17635
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Scroller horizontal contínuo

19-02-2008 17:03

Esse script mostra um scroller horizontal onde são exibidos vários banners em sequência, movimentando-se para esquerda.

* 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>
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado