Prosty pokaz slajdów z automatycznym odtwarzaniem - CSS-Tricks

Spisie treści

HTML

Umieść elementy div jako „slajdy”, które mogą zawierać dowolną zawartość.

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

CSS

Slajdy muszą być bezwzględnie umieszczone w opakowaniu. Ma to trochę dodatkowego 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

Uruchom, gdy DOM jest gotowy.

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