Slideshow manuel ou automatique simplifié

Soyez le premier à donner votre avis sur cette source.

Vue 40 020 fois - Téléchargée 4 302 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

nicomilville
Messages postés
3498
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
25 -
Salut,

quelle est l'intéret vu que je crois qu'il existe des tonnes de sources comme ça sur ce site ?

http://www.javascriptfr.com/recherche.aspx?r=diaporama

Tu as pas du bien chercher lol, mais ça pas grave, si tu rajoue des fonctionnalité, ça aura peut être bientot son utilité !

a++
meliubaf
Messages postés
23
Date d'inscription
lundi 1 octobre 2007
Statut
Membre
Dernière intervention
6 novembre 2009
-
Bonjour, comme je le disais en commentaire j'ai trouvé beaucoup de choses compliquées sur le sujet. J'avais besoin de quelque chose de léger alors je l'ai écris, et j'ai pensé que ça pouvait en intéresser d'autre d'avoir un source SIMPLE. Voilà c'est tout. ;-)
cs_chapata
Messages postés
215
Date d'inscription
mercredi 2 février 2005
Statut
Membre
Dernière intervention
9 avril 2010
3 -
Salut à vous,

je trouve ton script très bien, car il est simple. Et c'est avant tout, très compréhensible (même pour un débutant).
Après effectivement, pourquoi pas rajouter des fonctions adhoc, pour rendre fun le diaporama.
Mais en tous cas ca me plait et un 7/10 pour la note.

A +
cs_chapata
Messages postés
215
Date d'inscription
mercredi 2 février 2005
Statut
Membre
Dernière intervention
9 avril 2010
3 -
et hop .. la note. (que j'avais oublié ..)
mehdikobra
Messages postés
24
Date d'inscription
mardi 6 novembre 2007
Statut
Membre
Dernière intervention
21 décembre 2009
-
cé bien mon ami !!
bon continuation !!

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.