Ir para o conteúdo
Skyon

Adicionar Hover Controls a um Slideshow em JQuery

Mensagens Recomendadas

Skyon

Boa tarde,

À uns anos atrás desenvolvi um site para o meu irmão quem consistia, na sua maioria, em slideshows simples e automáticos, sem controls.

Agora quero alterar o site e adicionar controls aos slideshows com hover, mas o meu conhecimento de JQuery e Javascript já está muito enferrujado. Será que alguém me poderia ajudar/ensinar como posso fazer as alterações que preciso?

Os meus slideshows estão actualmente a funcionar da seguinte maneira:

JQuery

// Slideshow Effects
$(function(){
 $('.fadein img:gt(0)').hide();
 setInterval(function(){
 $('.fadein :first-child').fadeOut(2000)
	 .next('img').fadeIn(2000)
	 .end().appendTo('.fadein');},
	 5000);
});

simples, nada de mais...

CSS

/* Slideshow */
.fadein { position:relative; width:900px; height:446px; margin: 0 auto; top: 50px;}
.thumbs { position:relative; width:980px; height:446px; margin: 0 auto; top: 50px;}
.thumbsf { position:relative; width:900px; height:446px; margin: 0 auto; top: 50px;}
.fadein img { position:absolute; left:0; top:0; display:block;}

HTML

<!-- Slideshow Div -->
<div class="slideshow">
<div class="fadein">
<img src="img1.jpg" width="900" height="446" border="0" alt="" />
<img src="img2.jpg" width="900" height="446" border="0" alt="" />
<img src="img3.jpg" width="900" height="446" border="0" alt="" />
<img src="img4.jpg" width="900" height="446" border="0" alt="" />
</div>
</div>

Obrigado desde já.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.