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:
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>
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
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;
		}
 
-->
imgtxt.js:

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>');
 -->
Merci d'avance .
Cordialement.