Presentación de diapositivas de reproducción automática simple | Programar Plus

HTML

Envoltorio con divs como diapositivas, que puede contener cualquier contenido:

<div id="slideshow">
  <div>
    <img src="https://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
    <img src="https://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div>
    Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>

CSS

Los portaobjetos deben colocarse absolutamente dentro de la envoltura. Esto tiene un poquito de pizazz extra:

#slideshow { 
  margin: 50px auto; 
  position: relative; 
  width: 240px; 
  height: 240px; 
  padding: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}

jQuery

Ejecutar después de que DOM esté listo.

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)
  .end()
  .appendTo('#slideshow');
}, 3000);

Míralo

Uno muy similar de Snook.