1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
| <!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</head>
<body onload = "ListeAlterne(0)">
<!--Bloc conteneur des images-->
<div class="tp_block" id = "image_change" >
<img alt="" src="Images_nav/Diapo_auto_B3.png" class="image"> <img alt="" src="Images_nav/Diapo_auto_B6.png" class="image"> <img alt="" src="Images_nav/Diapo_auto_B9.png" class="image">
</div>
<script type="text/javascript">
var tab_images = [];
// première liste d'image qui correspond à celle affichée dans le html
tab_images.push(["Images_nav/Diapo_auto_B3.png","Images_nav/Diapo_auto_B6.png","Images_nav/Diapo_auto_B9.png"]);
// deuxième liste d'image qui remplacera la première
tab_images.push(["Images_nav/Diapo_droit_B3.png","Images_nav/Diapo_droit_B6.png","Images_nav/Diapo_droit_B9.png"]);
// troisième liste d'image qui remplacera la seconde
tab_images.push(["Images_nav/Diapo_gauche_B3.png","Images_nav/Diapo_gauche_B6.png","Images_nav/Diapo_gauche_B9.png"]);
// quatrième liste d'image qui remplacera la troisième
// etc.
// nombre de lignes du tableau
var tab_lignes_length = tab_images.length;
// Cible les images du bloc ayant l'id "image_change"
var div_change = document.getElementById("image_change");
var img_change = div_change.getElementsByTagName('img');
// Nombre d'images contenues dans le bloc
var img_change_length = img_change.length;
function Alterne(i,incr){
incr = incr < tab_lignes_length ? incr : 0;
//L'image est ciblée par son index i dans le bloc, le même index "i" défini l'image remplaçante dans la ligne du tableau, et "incr" correspond à la ligne du tableau ("incr" est incrémentée par les rappels successifs de setTimeout)
img_change[i].src = tab_images[incr][i];
incr++;
setTimeout(function(){Alterne(i,incr)},2000);
}
function ListeAlterne (incr)
{
// On appelle la fonction Alterne pour chaque image du bloc. i correspond à l'index (=position) de l'image dans le bloc, incr est utilisé pour incrémenter les lignes du tableau des images remplaçantes
for (var i = 0; i < img_change_length; i++)
{
Alterne(i,incr);
}
}
</script>
</body>
</html> |
Partager