Boa tarde
Fiz um crossfade de imagens com controlos, mas cada vez que carrego no botão next ou prev , as imagens ficam descontroladas. Para além disso e em relação ao botão prev, as imagens seguem a contagem normal, que deveria pertencer ao botão next, em vez de aparecer a imagem anterior.
Eis o código HTML:
<section id="galeria">
<img class="slider fade" src="images/Flam Railway_small.jpg" alt=""/>
<img class="slider fade" src="images/rocky-mountaineer.jpg" alt="" title="Rocky Mountaineer"/>
<img class="slider fade" src="images/Hogwarts train.png" alt=""/>
<img class="slider fade" src="images/amtrak-starlight_small.jpg" alt=""/>
<img class="slider fade" src="images/hiram_bingham_720.jpg" alt=""/>
<img class="slider fade" src="images/rovos rail.jpg" alt=""/>
<img class="slider fade" src="images/Venice Simplon.jpg" alt=""/>
<img class="slider fade" src="images/the ghan.jpg" alt=""/>
<span class="prev">«</span>
<span class="next">»</span>
</section>
<script>
imageSlider();
nextImage();
prevImage();
</script>
E o Javascript:
var contador = -1;
function imageSlider(){
var i;
var galeria = document.getElementsByClassName('slider');
for(i = 0; i < galeria.length; i++) {
galeria[i].style.display = 'none';
}
contador++;
if(contador == galeria.length) {
contador=0;
}
galeria[contador].style.display = 'block';
setTimeout(imageSlider,7000);
}
function nextImage() {
document.querySelector('.next').addEventListener('click',imageSlider,false);
contador++;
}
function prevImage() {
document.querySelector('.prev').addEventListener('click',imageSlider,false);
contador--;
}
O que falta, ou o que deverei alterar para o código funcionar correctamente?
Obrigado.
↧