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.

Voir le code sur CodePen

Code HTML :

<div id="bandeau_vertical" style="position:relative;width:150px;height:600px;border:1px solid black;overflow:hidden;">
 </div>
<div id="bandeau_horizontal" style="position:relative;width:600px;height:150px;border:1px solid black;overflow:hidden;">
</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 !