NetPlusMédia

Bannière défilante en javascript avec JQuery

Retour

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

banniere-defilante.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Banni&egrave;re d&eacute;filante en javascript avec JQuery</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='banniere-defilante.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <div class='banniere'>
  17. <img src='http://lorempixel.com/700/350/nature/1' title='Image 1' alt='Image 1' />
  18. <img src='http://lorempixel.com/700/350/nature/2' title='Image 2' alt='Image 2' />
  19. <img src='http://lorempixel.com/700/350/nature/3' title='Image 3' alt='Image 3' />
  20. <img src='http://lorempixel.com/700/350/nature/4' title='Image 4' alt='Image 4' />
  21. </div>
  22.  
  23.  
  24. <!-- Javascript -->
  25. <script language='Javascript' type='text/javascript'
  26. src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
  27. <script language='Javascript' type='text/javascript'
  28. src='timer.js'></script>
  29. <script language='Javascript' type='text/javascript'
  30. src='banniere-defilante.js'></script>
  31.  
  32. </body>
  33. </html>

banniere-defilante.css

  1. .banniere{
  2. position: relative;
  3. /*
  4.   Le calcule du pourcentage du padding-bottom est :
  5.   Hauteur de l'image / Largeur de l'image * 100
  6.   Pour cet exemple, nous utilisons des images 700x350px donc :
  7.   700 / 350 * 100 = 50
  8.   */
  9. padding-bottom:50%;
  10. /* page de hauteur car la hauteur sera créée avec le padding */
  11. height:0;
  12. overflow: hidden;
  13. }
  14.  
  15. .banniere_suivant , .banniere_precedent{
  16. position: absolute;
  17. background:#fff;
  18. top:40%;
  19. padding:10px;
  20. height:60px;
  21. width:60px;
  22. font-size:30px;
  23. font-weight:bold;
  24. color:#000;
  25. line-height:1.8em;
  26. z-index:2;
  27. -webkit-border-radius:60px;
  28. -khtml-border-radius:60px;
  29. -moz-border-radius:60px;
  30. -ms-border-radius:60px;
  31. -o-border-radius:60px;
  32. border-radius:60px;
  33. cursor:pointer;
  34. display:none;
  35. -webkit-opacity:0.4;
  36. -khtml-opacity:0.4;
  37. -moz-opacity:0.4;
  38. -ms-opacity:0.4;
  39. -o-opacity:0.4;
  40. opacity:0.4;
  41. filter:alpha(opacity=40);
  42. }
  43.  
  44. .banniere_suivant{
  45. right:-40px;
  46. text-align:left;
  47. -webkit-box-shadow:-2px 0 5px #000;
  48. -khtml-box-shadow:-2px 0 5px #000;
  49. -moz-box-shadow:-2px 0 5px #000;
  50. -ms-box-shadow:-2px 0 5px #000;
  51. -o-box-shadow:-2px 0 5px #000;
  52. box-shadow:-2px 0 5px #000;
  53. }
  54.  
  55. .banniere_precedent{
  56. left:-40px;
  57. text-align:right;
  58. -webkit-box-shadow:2px 0 5px #000;
  59. -khtml-box-shadow:2px 0 5px #000;
  60. -moz-box-shadow:2px 0 5px #000;
  61. -ms-box-shadow:2px 0 5px #000;
  62. -o-box-shadow:2px 0 5px #000;
  63. box-shadow:2px 0 5px #000;
  64. }
  65.  
  66. .banniere:hover .banniere_suivant , .banniere:hover .banniere_precedent{
  67. -webkit-opacity:1;
  68. -khtml-opacity:1;
  69. -moz-opacity:1;
  70. -ms-opacity:1;
  71. -o-opacity:1;
  72. opacity:1;
  73. filter:alpha(opacity=100);
  74. -webkit-transition:opacity 0.3s ease;
  75. -khtml-transition:opacity 0.3s ease;
  76. -moz-transition:opacity 0.3s ease;
  77. -ms-transition:opacity 0.3s ease;
  78. -o-transition:opacity 0.3s ease;
  79. transition:opacity 0.3s ease;
  80. }
  81.  
  82. .banniere img{
  83. position: absolute;
  84. top: 0;
  85. left: 0;
  86. width: 100%;
  87. height: 100%;
  88. z-index:1;
  89. }

banniere-defilante.js

  1. (function($){
  2.  
  3. $('.banniere').each(function(){
  4.  
  5. var element = $(this);
  6. var nombre_enfant = $(this).children("img").length;
  7.  
  8. if(nombre_enfant>1){
  9.  
  10. var en_cours = 0;
  11. element.children("img").hide();
  12. element.children("img").eq(en_cours).show();
  13.  
  14. element.append("<div class='banniere_suivant'>&gt;</div><div class='banniere_precedent'>&lt;</div>");
  15. var suivant = $(".banniere_suivant");
  16. var precedent = $(".banniere_precedent");
  17. suivant.show();
  18.  
  19. element.everyTime(4000, "banniere" , function(i) {
  20.  
  21. element.children("img").eq(en_cours).fadeOut(500);
  22.  
  23. en_cours++;
  24. if(en_cours==nombre_enfant) en_cours = 0;
  25.  
  26. element.children("img").eq(en_cours).fadeIn(500);
  27.  
  28. });
  29.  
  30. suivant.click(function(){
  31.  
  32. element.stopTime("banniere");
  33. precedent.show();
  34.  
  35. element.children("img").eq(en_cours).fadeOut(500);
  36.  
  37. en_cours++;
  38. if((en_cours+1)==nombre_enfant) suivant.hide();
  39.  
  40. element.children("img").eq(en_cours).fadeIn(500);
  41.  
  42. });
  43.  
  44. precedent.click(function(){
  45.  
  46. element.stopTime("banniere");
  47. suivant.show();
  48.  
  49. element.children("img").eq(en_cours).fadeOut(500);
  50.  
  51. en_cours--;
  52. if(en_cours==0) precedent.hide();
  53.  
  54. element.children("img").eq(en_cours).fadeIn(500);
  55.  
  56. });
  57.  
  58. }
  59.  
  60. });
  61.  
  62. })(jQuery);

Démonstration

Bannière défilante en javascript avec JQuery
Image 1 Image 2 Image 3 Image 4
fab-2-bzr    Posté le : 08/01/2015 - 17:06
bonjour, je fais mon site en MVC et cela ne fonctionne pas, a mon grand regret car c'est une jolie banniere.. y aurait il pas un chemin a ajouter pour le jquerry ou quelque chose? en faite, tout s'affiche nikel mais elle ne defile pas et les fleches n'apparaissent pas.. aidez moi svp, je la veut
NetPlusMédia    Posté le : 08/01/2015 - 17:24
Sans ton code, difficile de te corriger.
Vérifies que tu n'as pas de faute de code. Si tu es sur Chrome, clique droit > inspecter > regarde dans la console, elle affichera en rouge les erreurs à corriger.

Le code commence à être vieux et j'aurai mis : element.find("img")
au lieu de : element.children("img")

Fait déjà ça, ça résoudra peut être ton programme.
Zell    Posté le : 20/01/2015 - 12:52
Salut,

Depuis quelques jours je suis à la recherche d'un tel script pour faire défiler proprement des images sous le menu d'un site.

Je viens de tomber il y a quelques heures sur ta page, et depuis je suis en galère ^^
J'ai repris tout les morceaux de code que tu donne mais le résultat n'est clairement pas le même. Du coup j'ai inspecté la bannière et j'ai remarqué qu'il y a des lignes supplémentaires par rapport au code donné.

Exemple : (dans banniere-defilante.html)
Le code donné :
<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 -->

Le code inspecté :
<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 class="banniere_suivant" style="display: block;">&gt;</div>
<div class="banniere_precedent">&lt;</div>
</div>

<!-- Javascript -->


Je débute donc je pense que l'erreur vient de moi, il est fort probable que les 2 lignes en plus sont appelées par une ligne que je n'ai pas vu. Je vais continuer a chercher, en tout cas merci de partager ce genre de code !
NetPlusMédia    Posté le : 20/01/2015 - 13:19
Ces deux lignes sont appelées par le javascript grâce à la ligne 14 "append"
NetPlusMédia    Posté le : 20/01/2015 - 13:24
fab-2-bzr et Zell, avez-vous téléchargé jquery et ajouté cette ligne ?

<script language='Javascript' type='text/javascript' src='jquery.js'></script>

C'est peut être pour ça que vous n'y arrivez pas
NetPlusMédia    Posté le : 20/01/2015 - 13:39
J'ai mis à jour ma page "banniere-defilante.html" afin que ça soit plus simple pour tout le monde.
Ca devrait fonctionner plus facilement maintenant.
Zell    Posté le : 20/01/2015 - 17:09
Ah je comprends mieux, je n'ai pas téléchargé la librairie Jquery
Dés que je le pourrai la télécharger je le ferai, il me restera à l'envoyer sur mon serveur ftp et je viendrai te dire le résultat

Merci pour ce retour aussi rapide, c'est agréable !
Zell    Posté le : 20/01/2015 - 18:05
Ça fonctionne chez moi

Il fallait ceci :
<!-- Javascript -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='timer.js'></script>
<script src='banniere-defilante.js'></script>

Car ceci ne marchait pas en html5 :
<!-- 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>

Merci à vous, je vais garder votre site en favoris, bonne continuation
NetPlusMédia    Posté le : 20/01/2015 - 18:16
Ce code a plus de deux ans et je ne le referai plus vraiment comme ça non plus.
Vous avez tout à fait raison de le modifier pour le HTML5.
dijdija    Posté le : 01/04/2015 - 23:17
Bonjour, je voudrais savoir si ces images sont libres de droit sil vous plait?
NetPlusMédia    Posté le : 01/04/2015 - 23:36
Ces images sont publié par lorempixel.com
Elles sont en Creative Common, vous devez donc les citer, ou afficher l'url de leur site.
Kevin    Posté le : 11/07/2015 - 20:41
Super script mais il y a quelque bu : lorsque la première image a défilé, le bouton "<" ne s'affiche pas jusquau moment ou on appuis sur ">", et a partir de ce moment, les images ne défile plus.
Vraiment dommage, si cela était corrigé, le script aurait été parfait :)

Laissez-nous un commentaire


Votre pseudo/nom/prénom :
Votre commentaire :
Plan du site - Contact - Google+ - FaceBook - Twitter