Enkelt bildspel - CSS-tricks

HTML

Förpackning med div som "bilder", som kan innehålla vilket innehåll som helst.

   Pretty cool eh? This slide is proof the content can be anything.

CSS

Objektglasen måste placeras helt inuti omslaget. Detta har en liten bit extra pizazz:

#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 JavaScript

Kör efter att DOM är redo.

$("#slideshow > div:gt(0)").hide(); setInterval(function() ( $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); ), 3000);