SlideShow d'images, de photos affichées successivement avec fondu



♦ SlideShow d'images, de photos affichées successivement avec fondu

(faites les dernières mises à jours sur votre ordinateur pour que flash player fonctionne correctement)

Voici un exemple de 4 photos qui se succèdent avec un effet de transition par fondu.



SlideShow avec plusieurs photos

Slide 1 Slide 2 Slide 3 Slide 4

Voici le code html et javascript pour cette animation :

Il vous sera facile de modifier le fichier html et de l'adapter à votre convenance avec un éditeur comme Notepad++.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SlideShow avec plusieurs photos - Webinfotuto.free.fr</title>
</head>

<body>

<div style="text-align: center; font-size:20px;">SlideShow avec plusieurs photos<br><br>
<div style="margin-left:auto; margin-right:auto; width:300px; height:300px; border: 1px solid #CCCBC8;">
  <div id="slideShowImages">
    
    <img style="width:300px; height:300px;" src="images/img70.jpg" alt="Slide 1" title="Slideshow - images photos animations transition - Webinfotuto.free.fr" />
    <img style="width:300px; height:300px;" src="images/img74.jpg" alt="Slide 2" title="Slideshow - images photos animations transition - Webinfotuto.free.fr" />
    <img style="width:300px; height:300px;" src="images/img163.jpg" alt="Slide 3" title="Slideshow - images photos animations transition - Webinfotuto.free.fr" />    
    <img style="width:300px; height:300px;" src="images/img164.jpg" alt="Slide 4" title="Slideshow - images photos animations transition - Webinfotuto.free.fr" />
  </div>  
  <script src="SlideShow.js"></script>
</div></div> 

</body>
</html>


En regardant dans le fichier SlideShow.js vous pourrez modifier les paramètres de delais de transition entre deux photos. De la même façon utilisez l'éditeur Notepad++.

Utilisez des images au format JPG de préférence.

Il vous faut aussi télécharger le zip SlideShow.ZIP contenant les fichiers SlideShow.html et SlideShow.js à copier dans le même répertoire.





0511317