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
Código :
simples, nada de mais...
CSS
Código :
HTML
Código :
Obrigado desde já.
À 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
Código :
// Slideshow Effects
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut(2000)
.next('img').fadeIn(2000)
.end().appendTo('.fadein');},
5000);
});
$(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
Código :
/* 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;}
.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
Código :
<!-- 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>
<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á.