Bandeau défilant Div

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:

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:

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:

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.