Bonjour,
Je voudrais faire une sorte de "bandeau d�filant", le principe un tableau de 3 cases � gauche et � droite des fl�che pour faire d�filer, et au centre une div avec le contenu qui d�file.
Pour l'instant j'ai la fonction de d�placement, j'ins�re le contenu sans soucis, mais j'avoue ne pas avoir d'id�e pour faire tourn� le contenu de cette div "en boucle", je m'explique ce que je voudrais :
Ouverture de la page:
<|element1,element2,element3,element4|>
On passe sur la fleche de gauche:
<|nt1,element2,element3,element4,eleme|>
On continue:
<|ment2,element3,element4,element5,ele|>
Et si on continue encore ( c'est un exemple avec 5 �l�ments )
<|element3,element4,element5,element1|>
L'�l�ment 1 reviens donc � droite, j'aimerai donc faire ce fonctionnement pour la fl�che de gauche et de droite.
Pour l'instant :
Index.html:
fonctions.js :
Code : S�lectionner tout - Visualiser dans une fen�tre � part
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <SCRIPT SRC="fonctions.js"></SCRIPT> <table width=768 border=1 height=100> <tr> <!-- Fleche de gauche --> <td width=23px> <img src="./images/Fleche%20gauche.gif" onmouseover="debut(-10)" onmouseout="stop()" /> </td> <!-- Contenu --> <td id="centre" width=721 style="padding-right: 5px;"> <SCRIPT src="imgtxt.js"></SCRIPT> </td> <!-- Fleche de droite --> <td width=24px onmouseover="debut(10)" onmouseout="stop()" > <img src="./images/Fleche%20droite.gif" /> </td> </tr> </table> </body> </html>
imgtxt.js:
Code : S�lectionner tout - Visualiser dans une fen�tre � part
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 <!-- var dep=false; //variable globale de type bool, qui lorsque elle est a true permet le déplacement de l'objet. var vitesse=35; // vitesse de déplacement // La fonction de déplacement de l'objet function bouge(x) { if (dep) // Si dep=true { gaucheimage += x; //on rajoute "x" à "gaucheimage" document.getElementById("smile").style.marginLeft = gaucheimage; // on modifie la propriété css "margin-left", ça permet de déplacer l'image dansl le cadre setTimeout("bouge("+x+")",vitesse);// apelle récursif <=> while } } // Fonction pour débuter le déplacement function debut(x) { dep = true; bouge(x); } // fonction pour arrêter le deplacement function stop() { dep=false; } -->
Merci d'avance .
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8 <!-- var droiteimage = 696; var gaucheimage = 25; document.write('<div ID=smile ><p STYLE="position:relative;margin-left:'+gaucheimage+';margin-right:'+droiteimage+'"><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a><a href="#"> <img src="./images/blue.jpg"> Ceci est un test </a></p></div>'); -->
Cordialement.
Partager