Code JavaScript pour faire défiler des images

Voici un petit script en JavaScript qui permet de faire défiler des images sur une page web.

FireFox : Toutes versions
Google Chrome : 1 et +
Internet Explorer : 4 et +
Netscape Navigator : 3 et +
Microsoft Edge

Description du script

Ce script est composé de 2 parties, une première qu'on installe juste avant la balise </head> et le second a l'endroit où on veut que les images défilent sur votre page web. Dans l'exemple proposée, le script permet de faire défiler 3 images qui pointent vers 3 liens différents. Le changement d'images s'effectue toute les 5 secondes.

Voici le premier code :

<script language="javascript">
imgPath = new Array;
SiClickGoTo = new Array;
version = navigator.appVersion.substring(0,1);
if (version >= 3)
	{
	i0 = new Image;
	i0.src = 'url_image0';
	SiClickGoTo[0] = "Lien0";
	imgPath[0] = i0.src;
	i1 = new Image;
	i1.src = 'url_image1';
	SiClickGoTo[1] = "Lien1";
	imgPath[1] = i1.src;
	i2 = new Image;
	i2.src = 'url_image2';
	SiClickGoTo[2] = "Lien2";
	imgPath[2] = i2.src;
	}
a = 0;
function StartAnim()
	{
	if (version >= 3)
		{
		document.write('<a href="#" onclick="ImgDest();return(false)"><img src="url_image0" border="0" alt="Menu" name="defil" /></a>');
		defilimg()
		}
	else
		{
		document.write('<a href="Lien0"><img src="url_image0" border="0" /></a>')
		}
	}
function ImgDest()
	{
	document.location.href = SiClickGoTo[a-1];
	}
function defilimg()
	{
	if (a == 3)
		{
		a = 0;
		}
	if (version >= 3)
		{
		document.defil.src = imgPath[a];
		tempo3 = setTimeout("defilimg()",5000);
		a++;
		}
	}
</script>

Et voici le second, qui est bien plus court que le précédent :

<script language="javascript">
StartAnim();
</script>

Explication du premier code :

Après la déclaration des variables imgPath, SiClickGoTo; la variable version sert a tester la version du navigateur, pour éviter un bug à ceux qui utiliseraient encore une version inférieur ou égaler a Internet Explorer 3.

Maintenant on entre dans le vif du sujet. Une image a besoin de 4 lignes :

i(n) = new Image; 
i(n).src = 'url_image(n)'; 
SiClickGoTo[(n)] = "Lien(n)"; 
imgPath[(n)] = i(n).src;

On remplace, dans le code ci-dessus, (n) par le numéro de l'image sachant que la première image porte le numéro 0, on remplace url_image(n) par l'URL de l'image et on remplace Lien(n) par la cible vers laquelle doit pointer l'image,donc on obtient :

exemple : l'image a afficher se trouve a l'adresse http://www1.zonewebmaster.eu/images/chg-web.png et si on clique sur l'image on arrive sur la page HTML suivante : http://www.chg-web.com

i0 = new Image; 
i0.src = 'http://www1.zonewebmaster.eu/images/chg-web.png'; 
SiClickGoTo[0] = "http://www.chg-web.com"; 
imgPath[0] = i0.src;

Le code est prévu pour faire défiler 3 images, si vous voulez en faire défilez deux, suffit de supprimer le dernier bloc (de i2=new image; jusqu'à imgPath[2] = i2.src;). Et pour mettre plus d'image(s) suffit de rajouter un bloc de 4 lignes comme ci-dessus.

La fonction StartAnim() est la fonction principale du code, elle génère la création du code HTML pour l'affichage de l'image et si la version du navigateur est trop ancienne, elle génère un code HTML qui permet d'afficher la première image sans défilement. Nous devons apportez quelques modifications ici aussi, il faut remplacer url_image0 par l'URL de l'image de la première image, dans l'exemple ci-dessus, on remplace url_image0 par http://www1.zonewebmaster.eu/images/chg-web.png puis on remplace Lien0 par la cible définit pour la première image, dans l'exemple ci-dessus, on remplace Lien0 par http://www.chg-web.com. On obtient ceci :

function StartAnim() 
	{ 
	if (version >= 3) 
		{ 
		document.write('<a href="#" onclick="ImgDest();return(false)"><img src="http://www1.zonewebmaster.eu/images/chg-web.png" border="0" alt="Menu" name="defil" /></a>'); 
		defilimg() 
		} 
	else 
		{ 
		document.write('<a href="http://www.chg-web.com"><img src="http://www1.zonewebmaster.eu/images/chg-web.png" border="0" /></a>') 
		} 
	}

La fonction ImgDest() est une fonction qui génère automatiquement l'URL cible suivant l'image qui est affichée. Ici, aucune modification a effectuer.

La fonction defilimg() permet de faire défiler les images. En première partie, on test si a == 3 grâce a la commande if. Si la variable a est égale 3, on la remet a 0. Simplement on vérifie si il y a encore des images a faire défiler ou si on recommence une boucle. Il faudra donc apporter une modification a cette ligne de code en indiquant le nombre d'images que vous avez a faire défiler. Si vous en avez 8 vous aurez le code suivant :

if (a == 3) 
   { 
   a = 0; 
   }

Si vous désirez modifier le temps qui s'écoule avant que le script passe a l'image suivante vous devez modifier la ligne

tempo3 = setTimeout("defilimg()",5000);

La valeur 5000 correspond a 5000 millisecondes donc à 5 secondes, si vous voulez un changement d'images tout les 10 secondes suffit de remplacer 5000 par 10000.

Explication du second code :

Ici rien de très compliqué, on fait juste un appel de la fonction StartAnim() qui permet de générer le code HTML pour afficher la première image. Vous la placez simplement a l'endroit de votre page où vous voulez avoir vos images qui défilent.

Retour au Wiki