Diaporama à lecture automatique simple - Astuces CSS

HTML

Wrapper avec div comme «diapositives», qui peut contenir n'importe quel contenu.

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

CSS

Les diapositives doivent être absolument positionnées dans l'emballage. Cela a un tout petit peu de piquant supplémentaire:

#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

Exécutez une fois que DOM est prêt.

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