Einfache automatisch abspielende Diashow

HTML

Wrapper mit Divs als Folien, die beliebigen Inhalt enthalten können

<div id="slideshow">
  <div>
    <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
    <img src="//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

Folien müssen absolut innerhalb des Wrappers positioniert werden. Dies hat ein kleines bisschen extra Pepp.

#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

Ausführen, nachdem DOM bereit ist.

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

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

Ansehen

Sehr ähnlich von Snook.