Versão atual:

Rotatividade de imagens

Estou tentando fazer rotatividade de imagens usando HTML/CSS/Javascript : Segue a seguir os códigos que estou tentando : HTML :

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

<script src="js/home.js"></script>

CSS :

.destaque {
  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 {
    margin-bottom : 15px;
  border-left: 25px solid #900;
  border-bottom: 15px solid transparent;
  border-top: 15px solid transparent;
}

JavaScript :

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[bannersAtual];
}
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;
}

alguem pode ajudar? Não estou conseguindo fazer com que as imagens sejam rotacionadas.

Versões(2):

Ver a versão formatada

Rotatividade de imagens

Comentário

new question