Easy-Micro

LANGAGE Script JavaScript
Diaporama 1

Un diaporama JavaScript à défilement manuel




Attention : ce script est en deux parties, une dans le Head et l'autre dans le Body de votre document


Partie 1 à copier/coller dans le head:
<script>
var n = 0; //compteur
var ImgDiapo = new Array(); // variable de type tableau (Array)
ImgDiapo[0] = "images/fleur1.jpg";//nom de l'images 1 ici
ImgDiapo[1] = "images/fleur2.jpg";//nom de l'images 2 ici...
ImgDiapo[2] = "images/fleur3.jpg";//autant de ligne que d'images

//length : calcule la taille du tableau
//-1 car le tableau ImgDiapo commence à 0
var NbrImg = (ImgDiapo.length - 1);

//l'argument 'd' est spécifié dans le body
function Diapo(d) {
n = n + d;
if (n < 0) { n = NbrImg; } //boucle sur précédent
if (n > NbrImg) { n = 0; } //boucle sur suivant

//Myimg est le nom de l'image spécifié dans le body
document.Myimg.src = ImgDiapo[n];
}
</script>


Partie 2 à copier/coller dans le body:
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="70%">
<tr><td colspan="2" height="120"><div align="center">
<img src="images/fleur1.jpg" name="Myimg" id="Myimg" /></div></td>
</tr><tr>
<td><div align="left"><input type="button" value="< Précédent" onclick="Diapo(-1)" /></div></td>
<td><div align="right"><input type="button" value="Suivant >" onclick="Diapo(+1)" /></div></td>
</tr>
</table></div>


Attention de vérifier le nom de l'image dans cette partie 2 (ici fleur1.jpg).


< Page précédente SCRIPT JAVASCRIPT Page suivante >