HTML:
$(document).ready(function(){
$('#slideshow img:gt(0)').hide();
});
setInterval(function(){
$('#slideshow .image:first')
.fadeOut()
.next('.image').fadeIn()
.end()
.appendTo('#slideshow');
}, 4000);
$(document).ready(function(){
$('#next').click(function(){
$('.image').fadeOut().next('.image').fadeIn();
clearInterval();
});
});Dit is een Javascript bestand met jQuery erin.
Eerst zeg ik dat alle afbeeldingen in de Slideshow zich moeten 'hiden'.
Dan zeg ik dat als er 4 seconden voorbij zijn, de eerste afbeelding 'outfade' en de volgende afbeelding 'infadet'.
Om de 4 seconden verandert de slideshow dus van afbeelding.
Daarna zeg ik dat als je op #next klikt (een pijltje naast de slideshow, soort controlpanel) dat dan de afbeelding die je dan ziet moet 'outfaden' en de volgende afbeelding moet 'infaden'.
Alleen loopt dit laatste niet helemaal soepel. Als je bij de laatste afbeelding op #next klikt blijft ie op dezelfde afbeelding staan.
Voor de rest wordt de interval ook niet 'gecleart' nadat je op #next hebt geklikt
Wie kan mij helpen om de slideshow goed te maken?
