Images défilantes en javascript (scrolling images)

Soyez le premier à donner votre avis sur cette source.

Vue 35 733 fois - Téléchargée 3 745 fois

Télécharger le projet
Commenter

Description

Nouvelle version.

Quelques lignes en JavaScript suffisent pour introduire dans votre site web des images défilant horizontalement.
La zone (id='imd') contenant ces images peut être librement placée et dimensionnée.

Toutes les images ont la même dimension.

On peut choisir le nombre d'images et de l'espace entre les images.
La vitesse de défilement dépend des variables 'tim' et 'pas'.

Il est possible d'associer une action au "click" sur une image: l'exemple proposé ouvre une page correspondant à l'image.

L'exemple proposé est rudimentaire pour bien mettre en évidence les notions utilisées.
Adaptez et introduisez-le à votre propre site !

Cette nouvelle version est une simplification de l'ancienne. De plus, la zone des images défilantes peut être plus librement placée et dimensionnée.

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Images défilantes (scrolling images)</title>
   <script type="text/javascript">
   //<![CDATA[
      var pag=["Aihole","Badami","Belur","Halebid","Hampi","Haveri","Lakkundi","Pattadakal","Somnathpur"];
      var tim=50;  // temps de pause en millisecondes entre les appels à Nxt
      var wIm=160; // largeur en pixels des images
      var hIm=120; // hauteur en pixels des images
      var dIm=6;   // espace en pixels entre les images défilantes
      var wZn=600; // largeur de la zone des images défilantes
      var pas=2;   // décalage des images à chaque appel à la fonction Nxt
      
      var tmr,nIm=pag.length; // timer et nombre d'images
      var wTt=nIm*(wIm+dIm);  // largeur totale des images
      var xNx=hIm;            // est décrémenté de 'pas' à chaque appel à Nxt

      function Nxt() {
         var i,x=xNx;
         for (i=0; i<nIm; i++){
            if (x-wIm<=wZn) document.getElementById('im'+i).style.left=(x-wIm)+'px';
            if ((x+=wIm+dIm) >= wTt) x -= wTt;
         }
         if ((xNx-=pas) < 0) xNx += wTt;
      }
      
      function Clk(i) { // à remplacer par vos propres 'actions'
         window.open('Pag/'+pag[i]+'.html','_self');
      }

      function Ini() { // dans body, ajustez également la position absolue du div:id='imd'
         var i,s='',e=document.getElementById('imd');
         for (i=0; i < nIm; i++) s += "<img id='im"+i+"' onclick='Clk("+i+")' title='"+pag[i]
            +"' style='position:absolute; left:9999px; top:0px; cursor: pointer;' src='Img/"+pag[i]+".jpg'/>";
         e.style.width=wZn+'px'; e.style.height=hIm+'px'; e.innerHTML=s;
         // les 3 lignes suivantes ne sont pas indispensables
         s="<span style='color:red;'>Selection par le nom:</span>";
         for (i=0; i < nIm; i++) s += "<br/><a href='Pag/"+pag[i]+".html'>"+pag[i]+"</a>";
         window.document.getElementById('lsN').innerHTML=s;         
      }
   //]]>
   </script>
</head>

<body style='background-color:#BBBBBB;' onload='Ini(); tmr=setInterval("Nxt()",tim);'>
   <div id='imd' style='position:absolute; left:60px; top:50px; overflow:hidden;'
      onmouseover='clearInterval(tmr)' onmouseout='tmr=setInterval("Nxt()",tim)'>
   </div>
   <!-- la suite n'est pas indispensable et sert juste d'exemple -->
   <div style='float:left; width:99px; height:216px; padding:400px 6px 6px 6px; background-color:#CCCCCC;'>
      <hr />Obtenez<br/>les<br/>exemples<br/>complets<br/>horizontal<br/>et<br/>vertical:<br/><br/> &nbsp;
      <a href='http://www.william-voirol.ch/Prog/ImagesDefilantes/Ligne.zip'>Zip</a>
   </div>
   <div style='float:left; padding-left:20px;'>
      <p style='font-size:18px; color:blue;'>Quelques temples du Karnataka en Inde</p>
      <div id='lsN' style='width:160px; height:110px; background-color:#FFFFDD;
         padding-left:4px; margin:140px 0px 0px 80px; overflow:auto;'></div> <!-- contient la liste de noms -->
      <div style='color:green;'>
         <br/>Les temples de l'Inde vous intéressent ? : &nbsp;
         <a href='http://www.william-voirol.ch'>Splendeur de l'Inde</a>
      </div>
      <hr />
      <p style='font-size:24px;'>Images défilantes (scrolling images)</p>
      <p>
         -  Nouvelle version (27 juillet 2011).<br/>
         -  La zone des images défilantes peut être placée librement.<br/>
         -  Toutes les images ont la même dimension.<br/>
         -  Choix du nombre d'images et de l'espace entre les images.<br/>
         -  La vitesse de défilement dépend des variables 'tim' et 'pas'.<br/>
         -  Le mouvement s'arrête lorsque la souris survole les images.<br/>
         -  Il est possible d'associer une action au "click" sur une image:<br/>
            &nbsp; &nbsp; &nbsp; l'exemple proposé ouvre une page correspondant à l'image.
      </p>
      <p style='color:red;'>
         Testé avec les navigateurs:<br/>
         Internet Explorer 8 et 9, Firefox 5, Navigator 9,<br/>
         Google Chrome 11, Opera 11, Safari 5.
      </p>
   </div>
</body>
</html>

Conclusion :


Peut-on faire plus simplement ?

Faites directement un test:
http://www.william-voirol.ch/Prog/ImagesDefilantes/Ligne/horizontal.html
http://www.william-voirol.ch/Prog/ImagesDefilantes/Ligne/vertical.html

Remarque: de temps en temps, des espaces (caractères blancs) s'immiscent dans certains textes. (CodeS- SourceS est au courant du problème).
Si c'était le cas ici, enlevez les espaces avant d'utiliser les adresses Web ci-dessus.

Le programme proposé devrait fonctionner avec tous les navigateurs courants.

Deux exemples (horizontal et vertical) avec quelques images se trouve sur le fichier zip.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
sanamarrakech
9 nov. 2012 à 16:32
Bonjour je vous remercie trés fort sur ce code,j'ai un tout petit problème lorsque j'excute ce code,les images ne s'affichent pas just des petit carreaux qui se défillent et pas les photo prière de me dire la solution
William VOIROL Messages postés 261 Date d'inscription mardi 12 décembre 2006 Statut Membre Dernière intervention 10 juin 2019
9 juil. 2012 à 09:00
Bonjour,

Sur mon site
http://www.william-voirol.ch/Prog/
une nouvelle version est installée depuis une année.
Malheureusement, j'ai oublié de mettre à jour certains codes de Codes-SourceS.

Voilà qui est fait.

Milles excuses …
lancelot24 Messages postés 8 Date d'inscription samedi 7 juillet 2012 Statut Membre Dernière intervention 12 août 2021
8 juil. 2012 à 18:28
Bonjour et un grand merci pour ce code qui me serq très utile pour mon site. Il me pose un problème lorsque je l'intègre sur la page d'acceuil de mon site. Il s'affiche en haut au dessus de l'en tête. Je voulais le mettre en bas dans le pieds de page. Malgré tout il se met tout en haut. Je suis pas expert en développement besoin de votre aide svp
William VOIROL Messages postés 261 Date d'inscription mardi 12 décembre 2006 Statut Membre Dernière intervention 10 juin 2019
28 juil. 2011 à 09:16
Bonjour,

J'ai repris mon code pour essayer d'éviter d'utiliser des valeurs tels que
- window.innerWidth
- document.body.offsetWidth
qui dépendent du navigateur.

Je suis arrivé à une solution nettement plus simple et plus conviviale:
- On peut définir librement la position et la hauteur
de la zone des images défilantes (div: id='imd').
- Le défilement s'arrête lorsqu'on survole la zone avec la souris.
- Le nom de l'image s'affiche lorsque qu'on la survole.

Merci pour toutes vos remarques et successions.

Test direct:
http://www.william-voirol.ch/TP/Images%20defilantes

Prochainement, je ferai une mise à jour du code source
(également pour le défilement vertical).

William
CISKAD Messages postés 1 Date d'inscription mercredi 9 mars 2011 Statut Membre Dernière intervention 27 juillet 2011
27 juil. 2011 à 05:14
Tout d'abord, je tiens à remercier Mr William pour ce merveilleux script qui a apporté sa contribution pour la réalisation de mon site web (oeuvre humanitaire). Cependant j'ai un petit problème avec ce script, je n'arrive pas à décalé de la droite le défilement des images pour l'adapter à l'espace réservé. Prière à toute personne s'y connaissant de me venir en aide.
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (William VOIROL)