10: Diaporama

On veut créer un affichage où plusieurs images peuvent défiler à l'aide de deux flèches, comme ceci:

Pour ça, on va utiliser le HTML et le CSS suivants:

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>
</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 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;	
}


Vérifiez que ceci s'affiche bien et prenez le temps de comprendre en détail cette mise en page.

Lisez les commentaires du CSS.

Utilisez l'inspecteur (outils de développement) pour voir où sont les images.

On va ensuite voir ensemble comment faire fonctionner le défilement.