Banner rotativo simples

Front-end JavaScript
#1

Boa noite! Sou bem novato em javascript ainda e tenho apanhado bastante inclusive…
Estou estudando na própria apostila da Caelum um banner rotativo com botão de play e pause com duas imagens, mas a própria apostila não explica algumas coisas muito bem, já que os “desafios” devem ser feitos com auxílio do professor (quando cursei fizemos um projeto diferente). Enfim, aqui está o código em questão:

    //banner rotativo
    //array - o conjunto de elementos (imagens) que será usado na função do banner
    var banners = ["img/destaque-home.png", "img/destaque-home-2.png"];
    var bannerAtual = 0;

function trocaBanner() {
    bannerAtual = (bannerAtual + 1) % 2;
    document.querySelector('.destaque img').src = banners[bannerAtual];
}
//trocar a imagem a cada 4 segundos (o js mede tempo em MILÉSIMOS)
//a variável controle adicionará um botão de pause ao banner
var timer = setInterval(trocaBanner, 4000);
var controle = document.querySelector('.pause');

controle.onclick = function () {
    if (controle.className === 'pause') {
        clearInterval(timer);
        controle.className = 'play';
    } else {
        timer = setInterval(trocaBanner, 4000);
        controle.className = 'pause';
    }
    
    return false;
};

E para referência, o HTML/CSS do banner (a classe destaque está numa div container):

<img src="img/destaque-home.png" alt="Promoção: Big City Night">
        <a href="#" class="pause play"></a>

/* banner e botões de controle */
.destaque {
    margin-top: 10px;
    position: relative;
}
.pause,
.play {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
}
.pause {
    border-left: 10px solid #900;
    border-right: 10px solid #900;
    height: 30px;
    width: 5px;
}
.play {
    border-left: 25px solid #900;
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;
}

O problema em questão é que o botão de play/pause (que são um único botão que é transformado via CSS) simplesmente não faz nada. Peço desculpas pelo post gigante.

#2

Rapaz, eu sou bem iniciante também no JavaScript, não tinha chegado a fazer um slide assim e aproveitei seu código pra aprender aqui, valeu. Hehe

Portanto se eu falar alguma bobeira, me corrijam por favor.

Onde colocou seu script JS, interno ao HTML ou externo?

Aqui eu consegui fazer funcionar com algumas mudanças:

  • Tirando a classe “play” da ancora no HTML, ou seja deixando só a pause pra carregar na primeira execução.

  • Colocando o script JS dentro do HTML antes do fechamento da tag ‘body’.

Ex: …
<script>
…
</script>
</body>
Isso porque o script deve ser lido após a parte do HTML que contém a ancora, com a classe “pause”.
Dessa forma o javascript vai poder atribuir o evento ‘onclick’ de maneira correta.

Se o javascript for externo, com a função ‘window.onload’ você consegue a mesma funcionalidade de colocar o script depois, da uma buscada se não conhecer, e está mais de acordo com os padrões web.

Aqui com essas duas mudanças já funcionou, bem legal o código, tenta ae! :slightly_smiling:

#3

Muito obrigado! Eu já tinha resolvido o problema antes e ele era justamente a segunda classe (play) que adicionei. Me confundi esquecendo que o javascript pode modificar as classes, assim pensei que o CSS de play não se aplicava a nada e quebrando o banner com as duas classes…
E fico feliz que acabei te ajudando também no processo!

1 curtida
#4

Faz tempo que foram feitas essas postagens, mas estou estudando agora as apostilas da Caelum, cheguei nessa parte do pause e play. Eu já copiei o código, fiz conforme a apostila e as respostas, mas não consegui fazer. Quando abre a página o pause já está acionado (mesmo eu usando o “onclick”), quando dou play funciona, mas ao dar pausa de novo, o intervalo continua sem pausar. Fiz um documento externo e coloquei a tag script no final na body chamando o documento externo.