begin process at 2012 05 28 10:37:14
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > IMAGES DÉFILANTES EN JAVASCRIPT (SCROLLING IMAGES)

IMAGES DÉFILANTES EN JAVASCRIPT (SCROLLING IMAGES)


 Information sur la source

Note :
8,33 / 10 - par 3 personnes
8,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs Amusants Classé sous :image, défilante, scrolling, javascript, parade Niveau :Débutant Date de création :08/04/2011 Date de mise à jour :07/06/2011 10:08:19 Vu / téléchargé :5 784 / 766
Auteur : william voirol

Ecrire un message privé
Site perso
Commentaire sur cette source (15)
Ajouter un commentaire et/ou une note

 Description

Quelques lignes en JavaScript suffisent pour introduire dans votre site web une "ligne" d'images défilantes.
Le nombre d'images traitées s'adapte dynamiquement à la largeur de la fenêtre.
Il est également possible d'attribuer une action individualisée [function Clk(i)] au click sur une des images.
L'exemple proposé est rudimentaire pour bien mettre en évidence les notions utilisées.
Adaptez et introduisez-le à votre propre site !

Source

  • <html>
  • <head>
  • <title>Images défilantes (scrolling images)</title>
  • <script language="JavaScript">
  • var nIma=9; // nombre d'images
  • var xIma=160; // largeur des images
  • var dx=10; // espace entre les images défilantes
  • var xx=dx; // position de la première image
  • var pas=2; // décalage des images à chaque appel à la fonction Nxt()
  • var tim=50; // temps de pause en millisecondes entre les appels à Nxt()
  • var iIma=0,ima=new Array(nIma);
  • var fil=["a.jpg","b.jpg","c.jpg","d.jpg"
  • ,"e.jpg","f.jpg","g.jpg","h.jpg","i.jpg"];
  • var txt=["Aihole","Badami","Belur","Halebid","Hampi"
  • ,"Haveri","Lakkundi","Pattadakal","Somnathpur"];
  • function Nxt() {
  • if ((xx-=pas) <= -xIma) {
  • ima[iIma++].style.display='none';
  • if (iIma >= nIma) iIma=0;
  • xx=dx;
  • }
  • var x=xx,i=iIma,e;
  • var w=(navigator.appName=="Netscape")?window.innerWidth:document.body.offsetWidth;
  • while (x < w) {
  • e=ima[i++]; e.style.left=x+'px'; e.style.display='block';
  • x+=xIma+dx;
  • if (i >= nIma) i=0;
  • }
  • }
  • function Clk(i) {
  • alert(i+": "+txt[i]+" --> Remplacez Clk(i) par votre propre 'action'");
  • }
  • var i=0; while (i < nIma) document.write("<img id='im"+i
  • +"' style='position:absolute; top:40px; display:none' src='Img/"+fil[i]
  • +"' onclick='javascript:Clk("+(i++)+")'/>");
  • i=0; while (i < nIma) ima[i]=window.document.getElementById('im'+i++);
  • </script>
  • </head>
  • <body onload="setInterval('Nxt()',tim);">
  • <p style='font-size:18px; color:blue;'>
  • Quelques temples du Karnataka en Inde
  • </p><br /><br /><br /><br /><br /><br /><br />
  • <p style='font-size:12px; color:red;'>Cliquez sur une image !</p>
  • <p style='font-size:12px; color:green;'>
  • Les temples de l'Inde vous intéressent ? :
  • <a href='http://www.william-voirol.ch'>Splendeurs de l'Inde</a>
  • </p><hr><br /><br />
  • <p style='font-size:24px;'>
  • Images défilantes en JavaScript (scrolling images)
  • </p>
  • <p style='font-size:14px;'>
  • - Toutes les images défilantes doivent être de même dimension.<br />
  • - Choix du nombre d'images et de l'espace entre les images.<br />
  • - Le nombre d'images traitées s'adapte automatiquement à la largeur de la fenêtre.<br />
  • - La vitesse de défilement dépend des variables 'tim' et 'pas'.<br />
  • - Il est possible d'associer une action au "click" sur une image.<br />
  • - Téléchargez le zip (avec sources et images): &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images defilantes.zip'>Images défilantes</a>
  • </p>
  • <p style='font-size:12px; color:red;'>Testé avec les navigateurs:
  • 'Internet Explorer 8 et 9', 'Firefox 4', 'Navigator 9',
  • 'Google Chrome 11', 'Opera 11', 'Safari 5'.<br />
  • </p>
  • </body>
  • </html>
<html>
<head>
   <title>Images défilantes (scrolling images)</title>
   <script language="JavaScript">
      var nIma=9;   // nombre d'images
      var xIma=160; // largeur des images
      var dx=10;    // espace entre les images défilantes
      var xx=dx;    // position de la première image
      var pas=2;    // décalage des images à chaque appel à la fonction Nxt()
      var tim=50;   // temps de pause en millisecondes entre les appels à Nxt()
      var iIma=0,ima=new Array(nIma);
      var fil=["a.jpg","b.jpg","c.jpg","d.jpg"
         ,"e.jpg","f.jpg","g.jpg","h.jpg","i.jpg"];
      var txt=["Aihole","Badami","Belur","Halebid","Hampi"
         ,"Haveri","Lakkundi","Pattadakal","Somnathpur"];

      function Nxt() {
         if ((xx-=pas) <= -xIma) {
            ima[iIma++].style.display='none';
            if (iIma >= nIma) iIma=0;
            xx=dx;
         }
         var x=xx,i=iIma,e;
         var w=(navigator.appName=="Netscape")?window.innerWidth:document.body.offsetWidth;
         while (x < w) {
            e=ima[i++]; e.style.left=x+'px'; e.style.display='block';
            x+=xIma+dx;
            if (i >= nIma) i=0;
         }
      }
      
      function Clk(i) {
        alert(i+": "+txt[i]+" --> Remplacez Clk(i) par votre propre 'action'");
      }

      var i=0; while (i < nIma) document.write("<img id='im"+i
         +"' style='position:absolute; top:40px; display:none' src='Img/"+fil[i]
         +"' onclick='javascript:Clk("+(i++)+")'/>");
      i=0; while (i < nIma) ima[i]=window.document.getElementById('im'+i++);
   </script>
</head>

<body onload="setInterval('Nxt()',tim);">
   <p style='font-size:18px; color:blue;'>
         Quelques temples du Karnataka en Inde
   </p><br /><br /><br /><br /><br /><br /><br />
   <p style='font-size:12px; color:red;'>Cliquez sur une image !</p>
   <p style='font-size:12px; color:green;'>
      Les temples de l'Inde vous intéressent ? :
      <a href='http://www.william-voirol.ch'>Splendeurs de l'Inde</a>
   </p><hr><br /><br />
   <p style='font-size:24px;'>
      Images défilantes en JavaScript (scrolling images)
   </p>
   <p style='font-size:14px;'>
      -  Toutes les images défilantes doivent être de même dimension.<br />
      -  Choix du nombre d'images et de l'espace entre les images.<br />
      -  Le nombre d'images traitées s'adapte automatiquement à la largeur de la fenêtre.<br />
      -  La vitesse de défilement dépend des variables 'tim' et 'pas'.<br />
      -  Il est possible d'associer une action au "click" sur une image.<br />
      -  Téléchargez le zip (avec sources et images): &nbsp;
        <a href='http://www.william-voirol.ch/TP/Images defilantes.zip'>Images défilantes</a>
   </p>
  <p style='font-size:12px; color:red;'>Testé avec les navigateurs:
    'Internet Explorer 8 et 9', 'Firefox 4', 'Navigator 9',
    'Google Chrome 11', 'Opera 11', 'Safari 5'.<br />
  </p>
</body>
</html>

 Conclusion

Peut-on faire plus simplement ?
Un exemple avec quelques images se trouve sur le fichier zip.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

07 juin 2011 10:08:19 :
Mise à jour du code en tenant compte des messages.

 Sources du même auteur

Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION
Toutes les sources de william voirol

 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Toutes les sources de la catégorie Trucs Amusants

 Sources en rapport avec celle ci

Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip Source avec une capture ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix
Source avec Zip Source avec une capture BOITE DE TEXTE TYPE SCROLLBAR AVEC SCROLL VERTICAL par celeg

Commentaires et avis

Commentaire de DarkC0 le 09/04/2011 07:47:23

Salut william voirol,

J'ai regardais ton code et il est super, justement je cherchais le moyen de faire défiler des images pour un jeu que je veux faire en html et c'est pile poil ce qu'il me faut.

Par contre serait il possible de rajouter une ligne pour modifier la vitesse de défilement ?

Commentaire de william voirol le 09/04/2011 08:45:48

Changer la vitesse de défilement.

Dans la ligne 41.    <body onload="setInterval('Nxt()',50);">
   le second paramètre (ici 50) représente le "temps de pause"
   en millisecondes entre les appels à la fonction Nxt().

Description de 'setInterval' par exemple sous:   http://fr.selfhtml.org/javascript/objets/window.htm

Dans la ligne 15.         if ((xx-=2) <= -xIma) {
   Le 2 est le décalage (en pixels) à chaque appel à Nxt().


Il est donc possible de varier la vitesse de défilement des images en adaptant ces deux valeurs.

Commentaire de DarkC0 le 09/04/2011 11:51:18

Ah d'accord, c'est que je n'avais pas vu la ligne.

Merci beaucoup !!!

Commentaire de eldarai le 11/04/2011 09:06:58

Bravo William, c'est super et tres simple en fin de compte. je devais justement faire un truc dans ce genre. Ton code me servira de base. Encore merci
note:9/10

Commentaire de verdegris le 11/04/2011 22:11:37

Bonjour William Voirol,
J'ai un petit soucis avec votre script.
Lorsque je mets le type de "Doctype" (<!DOCTYPE... >) le script ne fonctionne plus.
Les instructions HTML sont bien générées mais la valeur du Left: dans l'instruction CSS "Style" est à zero px.
Auriez vous une idée de correction?
Merci.

Commentaire de lecurieux41 le 15/04/2011 16:36:43 8/10

C'est joli et cela fonctionne tres bien. Bravo

Commentaire de william voirol le 30/04/2011 13:29:09

Le code comporte une 'simplification' dans la ligne 25 qui ne passe plus dans Explorer 9:

25.   e=ima[i++]; e.style.left=x; e.style.display='block';

A remplacer par:

25.   e=ima[i++]; e.style.left=x+'px'; e.style.display='block';

C'est-à-dire qu'il faut ajouter l'unité 'px' à style.left.

Toutes mes excuses ...

Commentaire de verdegris le 30/04/2011 19:50:13 9/10

Bonjour William Voirol,
Effectivement, l'ajout de 'px' dans le style de l'image fait que votre script fonctionne correctement sous IE9 et FIREFOX 4
avec le type de doctype suivant : DTD XHTML 1.0 Transitional.
Merci pour cette rectification.
Bravo pour votre contribution.
Cordialement.

Commentaire de bobnc le 11/05/2011 14:28:48

Bonjour William, et merci pour votre contribution. Je souhaiterais utiliser comme action en cas de click l ouverture d une nouvelle page. peut - on utiliser de"s tableaux de ref? et comment les utilisre dans la fonction Clk(i)?
merci
cordialement
Robert

Commentaire de william voirol le 07/06/2011 13:24:29

Bonjour Robert,

Pour ouvrir une page spécifique lors d'un click sur une image, on peut par exemple remplacer la fonction  Clk(i)  par:
      function Clk(i) {
        window.open('page'+i+'.html');
      }

et créer dans le dossier principal, les 9 fichiers (si  nIma=9):
       page0.html,   page1.html,  ...,  page8.html
qui contiennent le code:

      <html>
        <head>
          <title>Page ?</title>
        </head>

        <body>
          <h1>Page ?</h1>
        </body>
      </html>

Ce code de test est rudimentaire et les '?' sont à remplacer par  0,1,..,8  respectivement.

Il serait également bon d'étudier les autres paramètres de la fonction  'window.open'  pour ouvrir une nouvelle fenêtre convenable.

W. Voirol

Commentaire de gigan le 14/06/2011 15:35:34 8/10

Bonjour William,

Je trouve cela super. Ca répond en partie à ce que je souhaitais dans ma page, si ce n'est que j'aurai souhaité faire défiler mes images de haut en bas. En effet j'ai un menu centré sur ma page et pour des questions estéthiques le défilement serai idéale sur un des cotés de la page.
Quel serais les modifications à apporter à ton code pour réaliser cela ?

En tous cas bravo.

Commentaire de abdoulax le 20/06/2011 12:22:33

Salut, bon moi je vais faire le relou avec mes critiques, mais c'est histoire de donner des idées (pour un autre de tes TP :p). J'ai regardé vite fait le code, je vois que tu donnes une liste statique d'image. Ce qui serai pas mal c'est de détecter toutes les images contenues dans une balise p ou div et de les faire défiler.
Une autre idée serai de faire disparaître l'image avec un fade-out ou d'utiliser un scroll overflow ;-)

Voilà, amuse toi bien  

Commentaire de sampoze le 30/06/2011 21:00:59

Salut,
je trouve superbe vos codes, mais j'ai un petit probleme, j'ai essaye sur mon application, ca a marche sur OPERA, FIREFOX tres bien, mais, sur explorer7, ca ne fonctionne pas tres, bien, g remplacex par px dans la ligne 25 du code, ca marche toujours pas. aidez moi STP

Samuel St Louis

Commentaire de CISKAD le 27/07/2011 05:14:08

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.

Commentaire de william voirol le 28/07/2011 09:16:30

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

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

faire défiler du texte et integrer un javascript sur une image [ par melane35 ] Bonjour, je suis toute nouvelle sur ce site et je réalise actuellement 1 site avec dreamweaver. J'ai quelques questions : il me semble qu'il est possi image aléatoir en javascript [ par HatMan ] bonjours,jaimerai pouvoir charger une image aléatoir dans un tableau pour chaque démaragemerci de votre aide[me] know cl3D M3th0[D] Ha|-Man[mIRC] Mass Comment vérifier la présence d'un fichier en javascript [ par LauKo ] Bonjour a toutes et tous,Voila j'aimerai savoir si il est possible de vérifier la présence d'un fichier en javascript.Je m'explique, je monte un petit image transparente par javascript ? [ par fmazoue ] est il possible de généré des image transparente par javascript^parce que en fait l'autre jour je m'amusai a faire un petit script qui simulait le dép Simuler de thread en Javascript [ par petit_stagiaire ] Bonjour,j'ai créé une fonction qui permet de faire tourner une image.elle se rappelle elle-même avec in setTimeout qui simule la vitesse.function tour Preview avancée d'images JAVASCRIPT [ par dreamed ] Bonjour,J'essaie de mettre en place sur mon site une fonction de preview d'image à partir de champ file (avant téléchargement).J'ai déjà un script qui pb javascript popup image [ par kobeenforce ] &lt;html&gt;&lt;head&gt;&lt;title&gt;Diaporama&lt;/title&gt;&lt;SCRIPT LANGUAGE="Javascript" src="./Images.js"&gt; &lt;/script&gt;&lt;SCRIPT LANGUAGE= Changer le Background image via onmouseover [ par dorian53 ] Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur soucis Javascript : faire afficher une image à des coordonnées souhaitées après clic sur un bouton [ par zarzar ] bonjour j'ai dans ma page 2 champs X et Y + bouton dans un formulaire : &lt;form name="position"&gt; X : &lt;input type="text" na Javascript image [ par Snurffle ] JE N'arrive pas a mettre une image sur mon site,l'image ne s'affiche point !!!


Nos sponsors


Sondage...

Comparez les prix


Archos Tablette PC ARNOVA ARNOVA 10 4GB
Entre 200€ et 210€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,278 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)