Controlos de slideshow de imagens

[FabioM]

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">&laquo;</span>
            <span class="next">&raquo;</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.

[HappyHippyHippo]

define : "descontroladas"

[FabioM]

10 minutos atrás, HappyHippyHippo disse:

define : "descontroladas"

Quando digo descontroladas, refiro-me ao facto das imagens estarem a passar umas seguidas às outras sem parar, ou seja, sem respeitar o tempo que defini no setTimeout. Deveriam ter uma transição normal para a próxima/anterior imagem assim que se carregasse no respectivo botão. 

[HappyHippyHippo]

o que estou a ver no teu código que é depois de actualizar a imagem, volta automaticamente a alterar a imagem ... a função do setTimeout é a mesma (recursividade)

podes explicar isso ?

[FabioM]

Ainda tou a dar os primeiros passos em javascript, dai as minhas duvidas.

A função imageSlider passa as imagens automaticamente, entretanto associei esta função às respectivas funções dos botões 'next' e 'prev' para dar controlo ao utilizador de passar as imagens.

Talvez exista alguma maneira de fazer reset ao setTimeout de cada vez que o utilizador carrega num dos botões? Se é que é a melhor maneira.

[HappyHippyHippo]

vê la se percebes o seguinte código

var contador = 0;
var cooldown = false;

function imageSlider(idx) {
    if (!cooldown) {
        cooldown = true;

        var galeria = document.getElementsByClassName('slider');
        for(var i = 0; i < galeria.length; i++) {
            galeria[i].style.display = 'none';
        }

        contador = Math.min(Math.max(idx, 0), galeria.length);
        galeria[contador].style.display = 'block';

        setTimeout(function () {
            cooldown = false;
        },7000);
    }
}


function nextImage() {
    imageSlider(contador + 1);
}
    
function prevImage() {
    imageSlider(contador - 1);
}

document.querySelector('.prev').addEventListener('click', prevImage, false);
document.querySelector('.next').addEventListener('click', nextImage, false);

[FabioM]

HappyHippyHippo, desculpa só responder agora mas tive ocupado com outros trabalhos.

 

Consegui fazer o codigo de outra maneira, incluindo um reset e um restart ao slider :

 

var contador = -1;
var animationActive = true;
var idtimeoutDelay = 0;
var idtimeoutAnimacao = 0; 
var tempoSlide = 7000;

window.onload = function() {
    document.querySelector('#next').addEventListener('click',nextImage,false);
    document.querySelector('#prev').addEventListener('click',prevImage,false);
iniciaAnimacao();
};


function iniciaAnimacao(){
    animationActive = true;
    imageSlider();
}

function imageSlider(){
    
    
    if (animationActive == true) { 
        
        contador++;
        mudaImagem();
    
        idtimeoutAnimacao = setTimeout(imageSlider, tempoSlide);
    }
}


function mudaImagem() {
    var i;
    
    var galeria = document.getElementsByClassName('slider');
    for(i = 0; i < galeria.length; i++) {
        galeria[i].style.display = 'none';
    }
     
    if(contador >= galeria.length) {
     contador=0;
    }
     
    if(contador < 0) {
     contador = galeria.length-1;
    }  
    
    galeria[contador].style.display = 'block';
}

function nextImage(event) {
    animationActive = false;
    contador++;
    mudaImagem();
    
    contaTempo();
    
    }
    
function prevImage(event) {
    animationActive = false;
    contador--;
    mudaImagem();
    contaTempo();
    }
    
    function contaTempo() {
        clearTimeout(idtimeoutAnimacao );
        clearTimeout(idtimeoutDelay );
        idtimeoutDelay = setTimeout(iniciaAnimacao,tempoSlide);
    } ;

[HappyHippyHippo]

por outras palavras ... ignoraste o código que te foi dado, e implementaste algo semelhante, mas pior e mais convoluto

[FabioM]

Fiz a partir do teu código, não o ignorei :s

De que maneira o código é mais convoluto?