Carrousel d'images en déplacement horizontal (Animation avec JQUERY)



♦ Carrousel d'images en déplacement latéral avec JQUERY

Voici un exemple de plusieurs photos se déplaçant dans un bandeau horizontal.



Gallerie de photos



Voici le code html et javascript pour cette animation JQUERY:

Il vous sera facile de modifier le fichier html et de l'adapter à votre convenance avec un éditeur comme Notepad++.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carrousel horizontal d'images avec jquery - Flash - Webinfotuto.free.fr</title>


<style>
#c-carousel {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px
}
#c-carousel {
	BACKGROUND-COLOR: #f3f3f3; MIN-HEIGHT: 120px; 
}
#c-carousel * {
	LINE-HEIGHT: 22px; FONT-FAMILY: Arial, Geneva, SunSans-Regular, sans-serif; COLOR: #333; FONT-SIZE: 14px
}

#wrapper {
	position: relative; margin-top: 10px;   
}

#carousel {
	WIDTH: 735px; padding-top:20px; 
}
#carousel UL {
	PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: block; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
#carousel LI {
	POSITION: relative; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; MARGIN: 6px; PADDING-LEFT: 0px; WIDTH: 232px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND: url(images/carousel_polaroid.png) no-repeat 0px 0px; FLOAT: left; HEIGHT: 178px; COLOR: #999; FONT-SIZE: 40px; PADDING-TOP: 0px
}
#carousel LI IMG {
	MARGIN-TOP: 14px; WIDTH: 201px; HEIGHT: 127px
}

.clearfix {
	FLOAT: none; CLEAR: both
}
#carousel .prev {
	POSITION: absolute; TEXT-INDENT: -999px; WIDTH: 15px; DISPLAY: block; BACKGROUND: url(images/carousel_control.png) no-repeat 0px 0px; HEIGHT: 21px; MARGIN-LEFT: 10px; OVERFLOW: hidden; TOP: 92px
}
#carousel .next {
	POSITION: absolute; TEXT-INDENT: -999px; WIDTH: 15px; DISPLAY: block; BACKGROUND: url(images/carousel_control.png) no-repeat 0px 0px; HEIGHT: 21px; MARGIN-LEFT: 10px; OVERFLOW: hidden; TOP: 92px
}
#carousel .prev {
	BACKGROUND-POSITION: 0px 0px; LEFT: -30px
}
#carousel .prev:hover {
	LEFT: -31px
}
#carousel .next {
	BACKGROUND-POSITION: -18px 0px; RIGHT: -20px
}
#carousel .next:hover {
	RIGHT: -21px
}
#carousel .pager {
	TEXT-ALIGN: center; MARGIN: 0px auto
}
#carousel .pager A {
	TEXT-INDENT: -999px; MARGIN: -10px 5px 0px 0px; WIDTH: 8px; DISPLAY: inline-block; BACKGROUND: url(images/carousel_control.png) no-repeat -2px -32px; HEIGHT: 8px; OVERFLOW: hidden; TEXT-DECORATION: none; 
}
#carousel .pager A.selected {
	BACKGROUND: url(images/carousel_control.png) no-repeat -12px -32px; TEXT-DECORATION: underline
}
#source {
	POSITION: absolute; TEXT-ALIGN: center; WIDTH: 100%; BOTTOM: 10px; LEFT: 0px
}
#source {
	COLOR: #999; FONT-SIZE: 12px
}
#source A {
	COLOR: #999; FONT-SIZE: 12px
}
</style>

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.carrousel.js"></script>
<script type="text/javascript" src="scripts/decoration.js"></script>

<script type=text/javascript>
			$(function() {
				prettyPrint();
			});
		</script>

<script type=text/javascript>
			$(function() {

				$('#carousel ul').carrousel({
					prev: '#prev',
					next: '#next',
					pagination: "#pager",
					scroll: 1000
				});
	
			});
		</script>


</head>


<body>

<div style="text-align: center; "><h2>Gallerie de photos</h2><br><br></div>
<div style="margin-left: auto; margin-right: auto; width:730px; height:300px;">
<div id=c-carousel>
<div id=wrapper>
<div id=carousel>
<ul>
  <li><img alt=""   src="images/img70bis.jpg"></li>
  <li><img alt=""   src="images/img74bis.jpg"></li>
  <li><img alt=""   src="images/img163bis.jpg"></li>
  <li><img alt=""   src="images/img164bis.jpg"></li>
  <li><img alt=""   src="images/img70bis.jpg"></li>
  <li><img alt=""   src="images/img74bis.jpg"></li>
</ul>

<a id=prev class=prev href="images/#"></a>
<a id=next class=next href="images/#"></a>
<div id=pager class=pager></div>

</div></div></div>
</div><br><br>


</body>
</html>

Utilisez des images au format JPG de préférence.
Il vous faut aussi télécharger le zip contenant les fichiers html et jquery(js) à copier dans le même répertoire que votre page html.



(faites les dernières mises à jours sur votre ordinateur pour que votre sytème fonctionne correctement (ainsi que flash player)





0488032