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 !

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.