begin process at 2012 05 29 00:17:47
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

Automatisation d'un diaporama

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Automatisation d'un diaporama

samedi 13 novembre 2010 à 13:08:12 | Automatisation d'un diaporama

ciranox
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 ?
Code Java :
setTimeout(function() {
    defileImage(null);
}, millisecondes);


Voici le code html:

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>
<body>
   <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>
<body onload="afficheVignettes();defileImage(null)">

<div id="Cvignettes" class="listeVignettes">
</div>
 </script>

</body>
</html>


Voici le code js:
Code Javascript :
// 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++
samedi 13 novembre 2010 à 17:03:49 | Re : Automatisation d'un diaporama

ciranox
J'ai vraiment besoin de votre aide?
lundi 15 novembre 2010 à 13:44:03 | Re : Automatisation d'un diaporama

Le grand Jisay
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
lundi 15 novembre 2010 à 21:55:00 | Re : Automatisation d'un diaporama

PetoleTeam

Membre Club
Bonjour,
assurément tu n'as pas choisi le lus simple.
Un diaporama c'est
un tableau d'images à afficher et quelques variables
Code 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

une fonction d'affichage de quelques lignes
Code Javascript :
//-----------------------
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
Code HTML :
<body onload="ShowImage(0);">
<h2>Diaporama simple...</h2>
<div style="text-align :center">
  <img name="PHOTO" src = "" alt="">
  <br>
  <button type="button" onclick = "ShowImage(-1);"> - </button>
  <button type="button" onclick = "ShowImage( 1);"> + </button>
</div>
</body>

pas bien besoin de plus pour démarrer.


;O)
mardi 16 novembre 2010 à 15:46:10 | Re : Automatisation d'un diaporama

ciranox
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++
mardi 16 novembre 2010 à 18:14:27 | Re : Automatisation d'un diaporama

PetoleTeam

Membre Club
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é...
Code Javascript :
<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)


Cette discussion est classée dans : code, var, jpg, arg, objimg

Répondre à ce message

Sujets en rapport avec ce message

problème de variable avec événement [ par seb_oulba ] Mmm voila, j'ai un problème avec la proprieté "arg" de ma classe : lorsque je passe par l'event handler, elle n'est plus définie :-(Je pense que c'est Modification d'un code JS pour un diaporama en fondu aléatoire [ par chouk57 ] Bonjour Je viens vers vous car j'ai réussi à trouver un slideshow parfait pour ce que je veux faire (à savoir un slideshow permettant l'affichage d'i XMLHttpRequest dans une boucle [ par Psype ] Bonjour, j'ai un petit souci avec un bout de code, je ne vois pas trop comment écrire ceci... Le but est de récupérer les données d'une page du même XMLHttpRequest ne marche que pour FireFox et Safari ?? [ par mrassaa ] Bonjour, Pour faire simple, j'ai une base de données dont j'ai envie d'extraire des infos. Mon programme marche nickel avec firefox et safari mais pa zoom - image ET commentaires [ par Villa Flore ] Bonjour, Je cherche à faire des zooms sur des miniatures. J'utilise le très bon script suivant : ---------------------------------------------------- Problème Bizarre if(var!= NULL) en javascript [ par midoxe ] Bonjour, je me retrouve avce un problème BIZARRE vraiment [^^confus2] !!!!! voici mon code : [code=as]function PromptMessage() { var saisie = Redirection après prompt [ par spacedelta ] Bonjour, J'ai écris un petit bout de code, qui permet de rentrer du texte dans un "prompt", et ensuite une redirection avec la valeur du "prompt". Mal var i égale à quoi une fois que j = 3 dans une boucle [ par jimmyhendrix ] Salut ! J'ai un problème de boucle. En gros, j'ai un fichier xml qui représente mon array dans mon code : [code=js]var xmlDoc=null; if (window.XMLHt défilement d'images (horizontal) - aide sur mon code [ par lisa78 ] Bonjour, j'aurais besoin d'un petit coup de pouce pour un bout de code javascript (que je ne comprends pas à 100%). ça fonctionne mais ça saccade: q Suppression de lignes ajoutées, dans un tableau [ par ju0123456789 ] Bonjour, Tout d'abord désolé si je ne suis pas dans le bon sujet. Ensuite, J'ai un tableau par défaut avec 3 lignes. J'ai créé un bouton qui en créé


Nos sponsors


Sondage...

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 : 3,042 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)