Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

webbercapua

Como auto iniciar essa função goto()

Recommended Posts

Olá, gostaria de criar um slide de conteúdo passando para o lado, quando eu clico nos links abaixo ele faz exatamente o efeito que quero porém gostaria que quando eu abrir a página o efeito auto iniciasse com algum controlador de tempo como faço ?

 

 

 

 

<script>
function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');
// add active class to the current link
$(t).addClass('active');
}
</script>
<div id="nav">
<ul>
<li ><a class="active" href="#" onClick="goto('#empresas', this); return false">Empresas</a></li>
<li><a href="#" onClick="goto('#colegios', this); return false">Colégios</a></li>
<li><a href="#" onClick="goto('#clubes', this); return false">Clubes</a></li>
<li><a href="#" onClick="goto('#residenciais', this); return false">Residenciais</a></li>
</ul>
</div>
<div class="contentbox-wrapper">
<div id="empresas" class="contentbox">
<img src="imagens/clientes1.fw.png" width="713" height="352" alt="Clientes" /> </div>
<div id="colegios" class="contentbox">
<img src="imagens/colegios.fw.png" width="626" height="297" alt="Colégios" /> </div>
<div id="clubes" class="contentbox">
<img src="imagens/clubes.fw.png" width="645" height="327" alt="Clubes" /> </div>
<div id="residenciais" class="contentbox">
<img src="imagens/Residenciais.fw.png" width="606" height="302" alt="Residenciais" /> </div>
</div>
</div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

setTimeout() é provavelmente o que você procura.

 

Você coloca x tempo no setTimeout(), depois que a animação terminar, chama setTimeout() novamente e repete esse ciclo. Se você precisar que o slider pare, por exemplo, quando o usuário der mouseover, você pode dar clearTimeout().

 

Esse é o processo básico.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.