<div id="slideShow">
	<div id="Gallery" onmouseover="stopSlider();" onmouseout="Slider();">
		<?php
		for($a=0;$a<20;$a++)
		echo '<a href="#" class="image-slider"></a>';
		
		?>
	</div>
</div>

/*********************************/
/*           Slider              */
/*********************************/

#slideShow{
	width:600px;
	height:150px;
	background-color:#171717;
	overflow:hidden;
	position:relative;
	top:350px;
	right:800px;
}

#Gallery{
	height:150px;
	position:relative;
	left:0;
}

.image-slider{
	width:150px; 
	height:150px; 
	background-color:blue; 
	position:absolute; 
	display:block;
}

/* Positionement de chaque images */
function placeElement(){
	var Obj = document.getElementById('Gallery');
	var a = Obj.getElementsByTagName("a");
	var add = 0;
	
	for(var i = 0 ; i < a.length ; i++){
		a[i].style.left = (10 + add)+ 'px';
		add += 160;
	}
	
	Slider();
}


/* Mise en place du déplacement */
function Slider(){
	var Obj = document.getElementById('Gallery'); // Conteneur
	var a = Obj.getElementsByTagName("a"); // Selection de tous les lien/images
	var largeur = 0; // Width du conteneur
	var tmp,tmp2;
	var posObj = parseInt(Obj.offsetLeft); // Position du conteneur
	
	tmp = a[(a.length - 1)].style.left; // position du dernier lien/image
	tmp = tmp.split('px');
	largeur = parseInt(tmp[0]) + 150;
	Obj.style.width = largeur + 'px'; // affectation de la taille du conteneur
	
	Timer = setTimeout(function(){
		for(var i = 0 ; i < a.length ; i++){
			tmp = a[i].style.left;
			tmp = tmp.split('px');
			tmp = parseInt(tmp[0]);
			if((largeur - tmp) < posObj){ // Si l'élément <a> en cours est en position inferieur au conteneur
				tmp2 = a[(a.length - 1)].style.left;
				tmp2 = tmp2.split('px');
				tmp2 = parseInt(tmp2[0]);
				a[i].style.left = (largeur + 150) + 'px'; // on le place a la fin
			}
			a[i].style.left = (tmp - 10) + 'px'; // on bouge tout les liens/images vers la gauche
		}
		Slider();
		
	},20);
}

function stopSlider(){
	clearTimeout(Timer);
}