Galerie photos - effet slide/glisse
Résolu/Fermé
ruvele
Messages postés
18
Date d'inscription
vendredi 14 décembre 2007
Statut
Membre
Dernière intervention
29 mai 2008
-
10 mars 2008 à 16:43
omar-senegal Messages postés 271 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 7 janvier 2017 - 14 mars 2008 à 12:13
omar-senegal Messages postés 271 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 7 janvier 2017 - 14 mars 2008 à 12:13
A voir également:
- Galerie photos - effet slide/glisse
- Partage de photos - Guide
- Toutes mes photos - Guide
- Galerie de photos windows live - Télécharger - Albums photo
- Effet miroir word - Guide
- Doublons photos - Guide
3 réponses
ruvele
Messages postés
18
Date d'inscription
vendredi 14 décembre 2007
Statut
Membre
Dernière intervention
29 mai 2008
5
13 mars 2008 à 13:28
13 mars 2008 à 13:28
Voici la solution :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Galerie slide</title> <script language="javascript" type="text/javascript"> <!-- var img_actuelle = 1; var no_images = 8; var width = 400; var proc = "vide"; var pos = 0; function init() { // créer le html pour toutes les images document.getElementById("boite_images").innerHTML = ""; var html = ""; for(var i = 1; i <= no_images; i++) { html += '<div id="img'+i+'" style="left:' + (i - 1) * width + 'px" class="images"><img src="pics/pic'+i+'.jpg" /></div>'; } document.getElementById("boite_images").innerHTML = html; compter(); } function go_avant() { // pas en avant console.log("go_avant()"); if(proc == "vide") { document.getElementById("nav_apres").style.visibility = "visible"; document.getElementById("nav_avant").style.visibility = "visible"; img_actuelle--; if(img_actuelle == 1) { document.getElementById("nav_avant").style.visibility = "hidden"; } compter(); proc = window.setInterval("animer(0)", 20); } } function go_apres() { // pas en arrière console.log("go_apres()"); if(proc == "vide") { document.getElementById("nav_apres").style.visibility = "visible"; document.getElementById("nav_avant").style.visibility = "visible"; img_actuelle++; if(img_actuelle == no_images) { document.getElementById("nav_apres").style.visibility = "hidden"; } compter(); proc = window.setInterval("animer(1)", 20); } } function animer(dir) { // l'animation if(dir == 0) { pos = pos + 25; } else { pos = pos - 25; } if(pos % width == 0) { // arreter tous les width (400) pixel window.clearInterval(proc); proc = "vide"; } for(var i = 1; i <= no_images; i++) { // placer l'ensemble des images var newpos = (i-1) * width + pos; document.getElementById("img"+i).style.left = newpos + "px"; } } function compter() { document.getElementById("nav_indique").innerHTML = "( " + img_actuelle + " / " + no_images + " )"; } //--> </script> <style type="text/css"> #boite_galerie { position:absolute; width:400px; height:330px; } #boite_images { position:absolute; width:400px; height:300px; overflow:hidden; } .boutons { position:absolute; width:30px; height:20px; top:310px; background-color:#FF0000; } #nav_apres { left:370px; } #nav_avant { visibility:hidden; } #nav_indique { left:180px; width:50px; } .images { position:absolute; visibility:visible; top:0px; } </style> </head> <body onload="init();"> <div id="boite_galerie"> <div id="boite_images"></div> <div id="nav_avant" class="boutons" onclick="go_avant();"> <<< </div> <div id="nav_indique" class="boutons"></div> <div id="nav_apres" class="boutons" onclick="go_apres();"> >>> </div> </div> </body> </html>
omar-senegal
Messages postés
271
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
7 janvier 2017
26
10 mars 2008 à 19:34
10 mars 2008 à 19:34
salut j aimerais bien ke l on mexplik comment cela fonctionne cet effet merci
omar-senegal
Messages postés
271
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
7 janvier 2017
26
14 mars 2008 à 12:13
14 mars 2008 à 12:13
merci beaucoup je vais essayer pour voir