Automatisation d'un diaporama

ciranox Messages postés 387 Date d'inscription vendredi 11 juillet 2008 Statut Membre Dernière intervention 28 février 2016 - 13 nov. 2010 à 13:08
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 16 nov. 2010 à 18:14
Bonjour,

J'ai un diaporama que j'ai trouvé sur ce site. Je voudrais juste que mes images défile automatiquement et pourvoir régler la vitesse. J'ai trouvé une fonction qui me permet de faire ça, le problème est qu'elle ne marche pas ?
setTimeout(function() {
    defileImage(null);
}, millisecondes);


Voici le code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

</head>

   <style type="text/css">
<!--
.listeVignettes{
  overflow: auto;
  width: 130px; 
  height: 240px;
  background-color: #000000;
  padding:0px;
}
 .vignettes{
  width: 100px;
  margin: 4px;
  cursor: pointer;  
}
-->
</style>
<script type="text/javascript" src="diaporama.js"></script> 
</head>






 </script>


</html>


Voici le code js:
// JavaScript Document

var chemin = "images/"; // dossier contenant les images
var tabImg = new Array("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "img5.jpg");

var i;
function defileImage(arg)

{
  if (!isNaN(arg) && arg!=null)
  {
    i = arg;
  }
 
  if (arg==null)
    i = 0;
  else
  {  
    switch (arg.id)
    { 
      case "btn1":    // id du bouton "première image"
          i = 0;
          break;
      case "btn2":    // id du bouton "image précédente"
          i--;
          break;
      case "btn3":    // id du bouton "image suivante"
          i++;
          break;
      case "btn4":    // id du bouton "dernière image"
          i = tabImg.length-1;
          break;

    }  
  }
  
}

function afficheVignettes()
{
  var j, objImg;
  var c;
  var tempo = "1";
var pas = 4;
var coef = 5;
  
  c = document.getElementById("Cvignettes");
 
  for (j=0; j<tabImg.length; j++)
  {
    objImg = document.createElement("img");
    objImg.src = chemin + tabImg[j];
    objImg.className="vignettes";
    
    objImg.n = j;
    objImg.onclick = function(){defileImage(this.n)}
        
    c.appendChild(objImg); 
  }
}


Merci d'avance.

A++

5 réponses

ciranox Messages postés 387 Date d'inscription vendredi 11 juillet 2008 Statut Membre Dernière intervention 28 février 2016
13 nov. 2010 à 17:03
J'ai vraiment besoin de votre aide?
0
Le grand Jisay Messages postés 100 Date d'inscription mardi 8 mai 2007 Statut Membre Dernière intervention 18 février 2011 2
15 nov. 2010 à 13:44
Salut !

Où as-tu déclaré ta variable millisecondes ?

Une autre solution serait d'utiliser un framework genre jQuery dont des défileuses d'images existent déjà...

A plus,

Le grand Jisay
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
15 nov. 2010 à 21:55
Bonjour,
assurément tu n'as pas choisi le lus simple.
Un diaporama c'est
un tableau d'images à afficher et quelques variables
//-- par exemple
var Tab_Image = [ "img_01.jpg", "img_02.gif", "img_03.jpg", "img_04.jpg"];
var Max_Image = Tab_Image.length -1; // indice derniere image
var Num_Image = 0;                   // Numero image en cours

une fonction d'affichage de quelques lignes
//-----------------------
function ShowImage( inc_){
  var OImg = document.getElementById("PHOTO"); // element a modifier
  Num_Image += inc_;                           // nouvelle image a afficher
  if( Num_Image > Max_Image){
    Num_Image = 0;                             // reviens au debut si hors tableau
  }
  if( Num_Image < 0){ 
    Num_Image = Max_Image;                     // reviens a la fin si hors tableau
  }
  oImg.src = Tab_Image[Num_Image];             // affectation de l'image
}

et bien sur au moins 2 boutons, un plus et un moins, sans oublier un minimmum de HTML
Diaporama simple...



  
  

   - 
   + 



pas bien besoin de plus pour démarrer.


;O)
0
ciranox Messages postés 387 Date d'inscription vendredi 11 juillet 2008 Statut Membre Dernière intervention 28 février 2016
16 nov. 2010 à 15:46
Salut PetoleTeam,

Merci de m'avoir répondu. Je viens d'essayer sont script mais il ne marche. Sur le code que j'ai posté pourrais-tu pas m'aider à le modifier pour que les images défiles automatiquement ?

Merci encore.

A++
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
16 nov. 2010 à 18:14
Bonjour,
Je viens d'essayer sont script mais il ne marche.
je dois admettre que j'aurais du tester avant de soumettre, quelques coquilles de frappe.

Je te le remets en entier corrigé...
<script type="text/javascript">
//-- par exemple
var Tab_Image = [ "img_01.jpg", "img_02.gif", "img_03.jpg", "img_04.jpg"];
var Max_Image = Tab_Image.length -1; // indice derniere image
var Num_Image = 0;                   // Numero image en cours
//-----------------------
function ShowImage( inc_){
// ERREUR  var OImg = document.getElementById("PHOTO");
  var oImg = document.images["PHOTO"];         // element a modifier
  Num_Image += inc_;                           // nouvelle image a afficher
  if( Num_Image > Max_Image){
    Num_Image = 0;                             // reviens au debut si hors tableau
  }
  if( Num_Image < 0){
    Num_Image = Max_Image;                     // reviens a la fin si hors tableau
  }
  oImg.src = Tab_Image[Num_Image];             // affectation de l'image
}
</script>

...pourrais-tu pas m'aider à le modifier...
ce que tu nous as fourni est incomplet ou alors ????

Mets le lien où tu l'as trouvé, mais par avance la méthode utilisé ne me paraît pas la plus judicieuse.

;O)
0
Rejoignez-nous