diapos.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>diapos</title>
		<link type="text/css" rel="stylesheet" href="diapos.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="diapos.js"></script>
	</head>
	<body>
<!--------------------->
<div id="dia">
	<div id="dia-images">
		<img src="http://moodle.iutv.univ-paris13.fr/img/js/montagne-small.jpg" />
		<img src="http://moodle.iutv.univ-paris13.fr/img/js/oiseau-small.jpg"   />
		<img src="http://moodle.iutv.univ-paris13.fr/img/js/escargot-small.jpg" />
		<img src="http://moodle.iutv.univ-paris13.fr/img/js/marmotte-small.jpg" />
	</div>
	<div id="dia-fleches">
		<span id="dia-gauche">&lt;</span>
		<span id="dia-droite">&gt;</span>
	</div>
	<ul id="dia-points">
		<li> </li>
		<li> </li>
		<li> </li>
		<li> </li>
	</ul>
</div>
<!--------------------->
	</body>
</html>

diapos.css

/* Le cadre principal. */
#dia
{
	/* On le restreint exactement à la taille d'une seule image. */
	width: 600px;
	height: 450px;
	/* Tout ce qui déborde est caché. Donc, une seule image n'est visible. */
	overflow: hidden;
	/* Ceci sert uniquement pour créer un containing block  */
	/* qui permet de positionner les flêches avec position: absolute  */
	position: relative;
}

/* Un div très très large */
/* Il contient toutes les images disposées horizontalement */
/* Il déborde de son parent */
#dia-images 
{
	width: 10000px;
	/* Trés important: c'est ce qui permet de décaler ce div en JS avec "left: ...px;" */
	position: relative; 
	/* Eviter les petits espaces entre les images */
	font-size: 0;
	/* initialisation à 0 (défaut "auto") : nécessaire sur Chrome */
	left: 0;
}

/* Commun aux deux flêches */
#dia-fleches span
{
	position: absolute;
	top: 200px;
	font-size: 30px;
	font-family: sans;
	background-color: rgba(0,0,0,.4);
	color: #bbb;
	padding: .1em;
	/* Le pointeur de la souris */
	cursor: pointer;
}
#dia-gauche
{
	left: 0;	
}
#dia-droite
{
	right: 0;
}
#dia-fleches span:hover
{
	color: #fff;	
}

#dia-points
{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 20px;
	left: 265px;
}

#dia-points li
{
	display: inline-block;
	width: 11px;
	height: 11px;
	border: 1px solid black;
	border-radius: 11px;
	margin-right: 5px;
	cursor: pointer;
	box-shadow: 0 0 1px rgba(255,255,255,.2);
}

#dia-points li:hover
{
	background-color: white;
}

#dia-points li.courant
{
	background-color: rgba(255,255,255,.5);
}

diapos.js

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est pret");
	mettre_a_jour_points(0);

	var minuteur=setInterval(function()
		{
			console.log("Appel par minuteurs");
			var position=parseInt($('#dia-images').css('left'));
			if(position%600!==0){return;}
			position-=600;
			if(position<-600*3){position=0;}
			mettre_a_jour_points(position);
			$('#dia-images').animate({left: position});			
		},2000);

	$('#dia-fleches span').mousedown(function()
		{
			console.log("Le bouton de la souris a été appuyé sur une flèche");
			if(minuteur!==false)
			{
				clearInterval(minuteur);
				minuteur=false;
			}
			var position=parseInt($('#dia-images').css('left'));
			if(position%600!==0){return;}
			var flecheDroite=$(this).attr('id')==='dia-droite';
			position+=(flecheDroite ? -600 : 600);
			if(position<-600*3 || position>0){return;}
			mettre_a_jour_points(position);
			$('#dia-images').animate({left: position});
		});

	$('#dia-points li').mousedown(function()
		{
			if(minuteur!==false)
			{
				clearInterval(minuteur);
				minuteur=false;
			}
			var imgN=$('#dia-points li').index(this);
			var position=-600*imgN;
			$('#dia-images').animate({left: position});
			mettre_a_jour_points(position);
		});

	function mettre_a_jour_points(position)
	{
		if(position%600!==0){return;}
		var imgN=-position/600;
		$('#dia-points li').removeClass('courant');
		$('#dia-points li').eq(imgN).addClass('courant');
	}

	console.log("La mise en place est finie. En attente d'événements...");
});