le MEMO du WEB développeur
••• Javascript •••  Liste des Mémos, astuces et bonnes pratiques

Défilement continu horizontal ou vertical d'une bande d'images en javascript

Le code suivant permet de faire défiler horizontalement ou verticalement et de façon continue un bandeau d'images.

Code HTML :

<div id="bandeau_vertical" style="position:relative;width:150px;height:600px;border:1px solid black;overflow:hidden;">
&nbsp;</div>
<div id="bandeau_horizontal" style="position:relative;width:600px;height:150px;border:1px solid black;overflow:hidden;">
&nbsp;</div>

Code javascript :

</script>
// Fonction de défilement horizontal
// el est l'élément HTML qui contiendra le contenu défilant
// src est un tableau comprenant le chemin des images à faire défiler
// pas est le pas d'incrémentation du défilement (défaut 1px)
// tps est le temps entre deux incrémentations  (défaut 50ms)

function defilImgHrz(el,srcs,pas,tps) {
  if(typeof el=="string") { el = document.getElementById(el); }
  var tps = tps || 50;
  var pas = pas || 1;
  var imgs = [];
  var offset = 0;
  for(var i=0,l=srcs.length;i<l;i++) {
    var img = new Image();
    img.src = srcs[i];
    imgs.push(img);
    img.style.height=el.offsetHeight+"px";
    img.style.position = "absolute";
    img.style.left = offset+"px";
    el.appendChild(img);
    offset += img.offsetWidth;
  }
  var first = 0;
  var last = imgs.length-1;

  (function d() {
    for(var i=0,l=imgs.length;i<l;i++) {
      var left = parseInt(imgs[i].style.left,10);
      imgs[i].style.left = (left-pas)+"px";
      if(i==first && (left-pas+imgs[i].offsetWidth)<0) {
        imgs[i].style.left = 
        (parseInt(imgs[last].style.left,10)+imgs[last].offsetWidth-(i==0?pas:0))+"px";
        last = first++;
        if(first>imgs.length-1) { first = 0; }
      }
    }
    setTimeout(d,tps);
  })();
}

// Fonction de défilement verticale
function defilImgVrt(el,srcs,pas,tps) {
  if(typeof el=="string") { el = document.getElementById(el); }
  var tps = tps || 50;
  var pas = pas || 1;
  var imgs = [];
  var offset = 0;
  for(var i=0,l=srcs.length;i<l;i++) {
    var img = new Image();
    img.src = srcs[i];
    imgs.push(img);
    img.style.width=el.offsetWidth+"px";
    img.style.position = "absolute";
    img.style.top = offset+"px";
    el.appendChild(img);
    offset += img.offsetHeight;
  }
  var first = 0;
  var last = imgs.length-1;

  (function d() {
    for(var i=0,l=imgs.length;i<l;i++) {
      var top = parseInt(imgs[i].style.top,10);
      imgs[i].style.top = (top-pas)+"px";
      if(i==first && (top-pas+imgs[i].offsetHeight)<0) {
        imgs[i].style.top = (parseInt(imgs[last].style.top,10)+imgs[last].offsetHeight-(i==0?pas:0))+"px";
        last = first++;
        if(first>imgs.length-1) { first = 0; }
      }
    }
    setTimeout(d,tps);
  })();
}
// Appel des deux fonctions de défilement au chargement de ma page .
window.onload=function() {
  defilImgVrt('bandeau_vertical',[
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg"
  
  ]);
  defilImgHrz('bandeau_Horizontal',[
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg"
  ]);
};
</script>

 Dans cet exemple les valeur d'incrémentation de distance et de temps sont celles par défaut puisque je ne les ai pas spécifiées dans les paramètres de la fonction. Vous pouvez jouer sur la vitesse ou l'effet saccadé du défilement en modifiant leurs valeurs. (3ème et 4ème paramètre)


Code piqué sur un forum mais je ne retrouve plus le lien, désolée !

Voir exemple sur ce site 

publié le 06/11/2012 par Memo Web
Images
Commentaire :
Bravo pour ce script, je voudrais pouvoir appeler toutes les images d'un r�pertoire par le d�but de leur nom.
je.partage@sfr.fr
Merci d'avance
par inconnu, le 27/09/2015
la banni�re horizontale ne fonctionne pas verticale �a marche tranquille
par inconnu, le 23/06/2015
la banniere horizontale ne fonctionne pas....
par inconnu, le 17/06/2014
Vous avez raison, j'ai mis en place ce code sur ce site : http://hbccbm.com/ (barre de défilement verticale de droite)
par tarabusk, le 13/03/2014
Aucun exemple concret !
par inconnu, le 22/02/2014
Merci, pour ce code je l'ai testé et il marche bien;
Mais peut-on avoir un commentaire du code, qui nous permettra de le personnaliser plus facilement
par inconnu, le 23/09/2013
Commenter le Mémo :

Typer ses variables en javascript
Replace() ou Remplacer une chaîne de caractères par une autre en Javascript
Fonction Javascript pour récupérer la valeur d'un cookie
Vérifier la validité d'une URL en Javascript - Expression régulière
Parcourir tous les éléments d'une classe CSS en Javascript
Parcourir un tableau en JavaScript
Vérifier qu'une chaine est constituée de caractères alphanumériques
Empêcher le clic droit sur les images de votre site
Parcourir les classes d'un élément HTML en JavaScript
Ouvrir une fenêtre popup sur lien HTML
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos