JavaScript

No HTML está class="pause play", então o valor de controle.className será inicialmente “pause play”. Por isso na primeira vez que clicar, ele cairá no else, e irá criar um novo timer (e a referência ao primeiro será perdida, por isso não será mais possível pausá-lo).

Então troque o HTML para ter apenas class="pause".

Eu também colocaria um texto no link, pois senão não dá pra saber onde é pra clicar:

<a href="#" class="pause">pause</a>

E no JavaScript você troca o texto junto com a classe:

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

Claro que daria pra fazer “firulas” (em vez do texto, colocar ícones de play e pause, etc), mas a ideia é essa.

Outra ideia é usar apenas uma classe que indica se o banner está rodando ou não:

<a href="#" class="playing">pause</a>

E no JavaScript, basta verificar se o elemento tem esta classe (e depois “invertê-la”):

var controle = document.querySelector('.playing');
controle.onclick = function() {
  if (controle.classList.contains('playing')) { // se está rodando, pausa
    clearInterval(timer);
    controle.innerText = 'play';
  } else { // se não está rodando, começa a rodar
    timer = setInterval(trocaImagem, 4000);
    controle.innerText = 'pause';
  }
  // muda o estado do banner
  controle.classList.toggle('playing');
  return false;
};

Ou seja, se está playing, eu pauso, senão eu começo outro timer. E no toggle faz a “inversão” (se tem a classe, remove, se não tem, adiciona).

Eu sugiro testar sem CSS primeiro (embora eu ache que não influencia em nada - não testei).

De qualquer forma, “não deu certo” é muito vago. O que acontece, que erro dá? Alguma mensagem no console? O que exatamente aconteceu, como vc testou? Etc etc

A mensagem de erro que aparece :TypeError não capturado TypeError: Não é possível definir as propriedades de null (definindo ‘onclick’)

Isso quer dizer que o querySelector não encontrou o elemento. Coloque o HTML e o JS atualizado, senão não tem como saber o que vc fez de errado.

Hugo, boa tarde, agradeço pela sua atencao

var imagens =["img/destaque-home.png" , "img/destaque-home-2.png"]; var imagemAtual = 0;

function trocaImagem() {

imagemAtual = (imagemAtual + 1) % 2;

document.querySelector(’.destaque img’).src = imagens[imagemAtual];

}

var timer = setInterval(trocaImagem, 4000);

window.onload = function(){}
var controle = document.querySelector(’.pause’);

controle.onclick = function() {

if (controle.className === ‘pause’) {

clearInterval(timer);

controle.className = ‘play’;

}else {

timer = setInterval(trocaImagem, 4000);

controle.className = ‘pause’;

}

return false;
};

E o HTML? Provavelmente não encontrou esse elemento, verifique se há um elemento com a classe “pause”.