Slideshows Dead Simple com JS e CSS

As apresentações de slides costumam ser o centro das atenções e são usadas para galerias de fotos ou nos grandes palcos centrais de muitos sites contemporâneos. Embora no passado o Adobe Flash fosse frequentemente a ferramenta de escolha usando CSS3, as apresentações de slides em JavaScript podem ser facilmente implementadas sem muitos códigos.

A técnica que estou usando aqui é uma das maneiras mais fáceis de realizar uma apresentação de slides simples com um bom efeito de transição de fade cruzado usando apenas JavaScript e CSS3 padrão.

A marcação base é trivial. Basta colocar algumas imagens em um contêiner div:

 <div class="slides">
  <img src="http://lorempixel.com/500/300/?r=1">
  <img src="http://lorempixel.com/500/300/?r=2">
  <img src="http://lorempixel.com/500/300/?r=3">
  <img src="http://lorempixel.com/500/300/?r=4">
  <img src="http://lorempixel.com/500/300/?r=5">
</div>

Empilhe todas as imagens umas sobre as outras dentro do contêiner usando CSS e defina as transições (prefixo específico do navegador pode ter que ser usado para transições):

/* the slide container with a fixed size */
.slides {
  box-shadow: 0px 0px 6px black;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
}

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img { 
  display: block;
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
  width: 100%;
}

/* the first image is the current slide. it's faded in. */
.slides img:first-child { 
  z-index: 2; /* frontmost */
  opacity: 1;
}

/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
  z-index: 1; /* behind current slide */
  opacity: 1;
}

Após essa configuração simples, tudo o que resta é alterar a ordem dos slides para avançar a apresentação de slides. O trecho a seguir move periodicamente a primeira imagem (slide atual) para o final do contêiner, tornando a próxima imagem o slide atual. A mudança é animada com um cross-fade graças às regras CSS definidas acima.

function nextSlide() {
    var q = function(sel) { return document.querySelector(sel); }   
    q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 3000)

E isso é tudo que há para fazer. Eu carreguei o exemplo completo para JSFiddle .