Enkel automatisk avspilling av lysbildefremvisning - CSS-triks

HTML

Innpakning med div som “lysbildene”, som kan inneholde hvilket som helst innhold.

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

CSS

Lysbildene må være absolutt plassert i innpakningen. Dette har litt ekstra 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

Kjør etter at DOM er klar.

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