Slideshow manuel ou automatique simplifié

Télécharger le projet
Commenter

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...)
Télécharger le projet

Codes Sources

A voir également

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.