Bannière défilante en javascript avec JQuery

Ce programme fonctionne avec la librairie Jquery et la fonction Jquery Timers

banniere-defilante.html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
<title>Banni&egrave;re d&eacute;filante en javascript avec JQuery</title>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
 
 
<!-- Style CSS -->
<link rel='stylesheet' type='text/css' href='banniere-defilante.css' />
 
 
 
</head>
<body>
 
 
<div class='banniere'>
 <img src='http://lorempixel.com/700/350/nature/1' title='Image 1' alt='Image 1' />
 <img src='http://lorempixel.com/700/350/nature/2' title='Image 2' alt='Image 2' />
 <img src='http://lorempixel.com/700/350/nature/3' title='Image 3' alt='Image 3' />
 <img src='http://lorempixel.com/700/350/nature/4' title='Image 4' alt='Image 4' />
</div>
 
 
<!-- Javascript -->
<script language='Javascript' type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script language='Javascript' type='text/javascript'
 src='timer.js'></script>
<script language='Javascript' type='text/javascript'
 src='banniere-defilante.js'></script>
 
</body>
</html>

Télécharger le fichier

banniere-defilante.css

.banniere{
 position: relative;
 /*
  Le calcule du pourcentage du padding-bottom est :
  Hauteur de l'image / Largeur de l'image * 100
  Pour cet exemple, nous utilisons des images 700x350px donc :
  700 / 350 * 100 = 50
  */
 padding-bottom:50%;
 /* page de hauteur car la hauteur sera créée avec le padding */
 height:0;
 overflow: hidden;
}
 
.banniere_suivant , .banniere_precedent{
 position: absolute;
 background:#fff;
 top:40%;
 padding:10px;
 height:60px;
 width:60px;
 font-size:30px;
 font-weight:bold;
 color:#000;
 line-height:1.8em;
 z-index:2;
 -webkit-border-radius:60px;
 -khtml-border-radius:60px;
 -moz-border-radius:60px;
 -ms-border-radius:60px;
 -o-border-radius:60px;
 border-radius:60px;
 cursor:pointer;
 display:none;
 -webkit-opacity:0.4;
 -khtml-opacity:0.4;
 -moz-opacity:0.4;
 -ms-opacity:0.4;
 -o-opacity:0.4;
 opacity:0.4;
 filter:alpha(opacity=40);
}
 
.banniere_suivant{
 right:-40px;
 text-align:left;
 -webkit-box-shadow:-2px 0 5px #000;
 -khtml-box-shadow:-2px 0 5px #000;
 -moz-box-shadow:-2px 0 5px #000;
 -ms-box-shadow:-2px 0 5px #000;
 -o-box-shadow:-2px 0 5px #000;
 box-shadow:-2px 0 5px #000;
}
 
.banniere_precedent{
 left:-40px;
 text-align:right;
 -webkit-box-shadow:2px 0 5px #000;
 -khtml-box-shadow:2px 0 5px #000;
 -moz-box-shadow:2px 0 5px #000;
 -ms-box-shadow:2px 0 5px #000;
 -o-box-shadow:2px 0 5px #000;
 box-shadow:2px 0 5px #000;
}
 
.banniere:hover .banniere_suivant , .banniere:hover .banniere_precedent{
 -webkit-opacity:1;
 -khtml-opacity:1;
 -moz-opacity:1;
 -ms-opacity:1;
 -o-opacity:1;
 opacity:1;
 filter:alpha(opacity=100);
 -webkit-transition:opacity 0.3s ease;
 -khtml-transition:opacity 0.3s ease;
 -moz-transition:opacity 0.3s ease;
 -ms-transition:opacity 0.3s ease;
 -o-transition:opacity 0.3s ease;
 transition:opacity 0.3s ease;
}
 
.banniere img{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index:1;
}

Télécharger le fichier

timer.js

Télécharger le fichier

banniere-defilante.js

(function($){
 
 $('.banniere').each(function(){
 
 var element = $(this);
 var nombre_enfant = $(this).children("img").length;
 
 if(nombre_enfant>1){
 
 var en_cours = 0;
 element.children("img").hide();
 element.children("img").eq(en_cours).show();
 
 element.append("<div class='banniere_suivant'>&gt;</div><div class='banniere_precedent'>&lt;</div>");
 var suivant = $(".banniere_suivant");
 var precedent = $(".banniere_precedent");
 suivant.show();
 
 element.everyTime(4000, "banniere" , function(i) {
 
 element.children("img").eq(en_cours).fadeOut(500);
 
 en_cours++;
 if(en_cours==nombre_enfant) en_cours = 0;
 
 element.children("img").eq(en_cours).fadeIn(500);
 
 });
 
 suivant.click(function(){
 
 element.stopTime("banniere");
 precedent.show();
 
 element.children("img").eq(en_cours).fadeOut(500);
 
 en_cours++;
 if((en_cours+1)==nombre_enfant) suivant.hide();
 
 element.children("img").eq(en_cours).fadeIn(500);
 
 });
 
 precedent.click(function(){
 
 element.stopTime("banniere");
 suivant.show();
 
 element.children("img").eq(en_cours).fadeOut(500);
 
 en_cours--;
 if(en_cours==0) precedent.hide();
 
 element.children("img").eq(en_cours).fadeIn(500);
 
 });
 
 }
 
 });
 
})(jQuery);

Démonstration

Bannière défilante en javascript avec JQuery