Adicionar Hover Controls a um Slideshow em JQuery

[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á.