Slideshow manuel ou automatique simplifié

Soyez le premier à donner votre avis sur cette source.

Vue 42 235 fois - Téléchargée 4 584 fois

Description

J'ai souvent cherché (et trouvé) des slideshow (défilement images ou encore appelés diaporamas) compliqués en Javascript. Aussi j'ai finalement décidé d'écrire mon bout de code:-)

Voici mon code SIMPLIFIÉ au possible qui fait juste ce qu'on lui demande :
- manuel : appuyer sur un bouton pour afficher l'image précédente ou suivante
- automatique : l'image passée en paramètre se change automatiquement (possibilité stopper)
(+ une variante dans le zip : slideshow 2 images)

Testé avec Chrome4, Firefox3.5, IE6, IE7, Opera10.5

Source / Exemple :


/**********************/
/* Fichier JavaScript */
/**********************/

/*
  Simple slide show manuel ou automatique,
  dans la fenetre courante ou en popup, selon vos besoins...
  Creation 18/06/2008 Amelie Vanbockstael
  Mise a jour 20/04/2010

  • /
//adresse des images myPix = new Array("images/ico0.gif","images/ico1.gif","images/ico2.gif","images/ico3.gif") //changement manuel thisPic = 0 imgCt = myPix.length - 1 function chgSlide(direction) { if (document.images) { thisPic = thisPic + direction if (thisPic > imgCt) { thisPic = 0 } if (thisPic < 0) { thisPic = imgCt } document.Puzzle.src = myPix[thisPic] } } //changement automatique //vitesse de defilement en milliseconds speed = 1000; i = 0; function autoSlideShow(imgname) { if (document.images) { document.getElementById(imgname).src = myPix[i]; i++; if (i > myPix.length-1) i = 0; b=imgname; objet_timer = setTimeout('autoSlideShow(b)',speed); } } //arreter le defilement function arret() { clearTimeout(objet_timer); } //prechargement des images de Dreamweaver function preload() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=preload.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } /******************************************/ /* Appel de ce script depuis la page HTML */ /******************************************/ <HTML> <HEAD> <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Language" content="fr"> <meta name="Language" content="fr"> <meta name="Author" content="Amélie Vanbockstael"> <title>Slide show en Javascript</title> <script language="JavaScript" src="slideshow.js"></script> </HEAD> <BODY onLoad="preload('images/ico0.gif','images/ico1.gif','images/ico2.gif','images/ico3.gif')"> <h2>Manuel</h2> <img src="images/ico0.gif" id="Puzzle" name="Puzzle" width="48" height="48"><br> <a href="javascript:chgSlide(-1)"><b> << </b></a> &nbsp; &nbsp; <a href="javascript:chgSlide(1)"><b> >> </b></a><br> <hr> <h2>Automatique</h2> <a href="javascript:arret()"><img src="images/ico0.gif" id="Slide" name="Slide" width="48" height="48" border="0" alt="Arrêter ?"></a> <script language="JavaScript">autoSlideShow('Slide')</script> </BODY> </HTML>

Conclusion :


Ce petit code très simple et très court vous permettra de :

- l'intégrer facilement dans votre page
- ou coder à partir de cela les fonctions dont vous avez besoin (et uniquement celles là)...
- ou encore comprendre un minimum "comment ça marche" afin de lire d'autres codes plus évolués sur le même sujet (diaporama avec transition, fondus, vignettes, bords arrondis etc...)

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
28
Date d'inscription
mardi 1 mai 2007
Statut
Membre
Dernière intervention
23 février 2016

SUPER c'est exactement ce qu'il me fallait

petite cerise sur mon gâteau comment faire apparaitre un petit texte lié à chaque photo ( au dessus ou au dessous)

merci pour les suggestions
cordialement
Messages postés
1
Date d'inscription
vendredi 9 janvier 2009
Statut
Membre
Dernière intervention
7 octobre 2012

Humblement je croyais connaitre assez javascript mais j'avoue mon incompétence.
en effet j'ai inséré le code dans mon site en préparation et si je change le nombre d'images plus rien ne marche.
Question y a t'il quelque chose à modifier pour personaliser le code exemple mes images sont toutes regroupées sous : mon site/images
où dois mettre puzzle ou bien ce qui doit remplacer ce nom, je me sens perdu mon site est fait en css le script dans body #zone de texte (conteneur)Pourriez vous m'aider d'avance merci
Messages postés
22
Date d'inscription
lundi 1 octobre 2007
Statut
Membre
Dernière intervention
6 novembre 2009

Bonjour, effectivement d'habitude je mets des balises name et id partout, mais là j'ai du oublier. Je reposterai un zip prochainement. merci de vos commentaires.
Messages postés
1
Date d'inscription
jeudi 8 avril 2010
Statut
Membre
Dernière intervention
16 avril 2010

Bonjour,
je débute en javascript et merci beaucoup pour ce script, j'vais essayer d'y ajouter un effet de fade-in / fade-out entre les différents slides et ça va avoir un effet du tonnerre sur le site web que l'on est entrain de développer !
Le Commentaire de Rafale71 le 20/03/2009 13:58:46

Hello, meliubaf
Pour que ton script marche correctement sur Firefox, jŽai tu doit changer cette ligne de code:

Avant:

Après:

m'a bien aidé quand j'étais bloqué à ne pas savoir pourquoi en mode auto ça ne fonctionnais pas pour moi...

Bonne continuation
Messages postés
6
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
18 mars 2010

merci meliubaf, je vais exploiter ton code.
a+
Afficher les 23 commentaires

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.