Diapo Java script

**Alexis35** · 16/08/2010, 10h19

Bonjour,

Je cherche à réaliser un petit diaporama en javascript de 2 à 6 photos suivant les annonces.

Le principe étant d'avoir les images en miniatures (entre deux et 6) et en dessous le diaporama qui défilerait en continue (avec fondu).

Pour cela j'ai bien trouvé plusieurs sources qui fonctionnent parfaitement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<script>
 
tbimage=new Array('bateau','peli','bateau2','dauphin','crabe','oiseau') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opaa=0;
var opab=100;
var compteur=2
var vitesse=2000
 
function precharge() { 
  for (i = 0; i < tbimage.length; i++) { 
    preImages[i] = new Image()
    preImages[i].src = 'images/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vitesse);
}
 
function defilmage(reg){
oxo=reg;
if(compteur==tbimage.length-1){
compteur=-1
}
if(oxo==1){
compteur++
opaa=10;
document.getElementById('divimageb').src="images/"+tbimage[compteur]+".jpg";
oxo=0;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');
 
opaa+=3;
opab-=4;
if(document.all && !window.opera){ 
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
} 
else{ 
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=10;
opab=100;
var xcc=imaciblea.src.length-4
var cxx=imaciblea.src.lastIndexOf("/")+1
var nomimg=imaciblea.src.substring(cxx,xcc)
imacibleb.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",25);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>
</head>
<body>
<img src="images/bateau.jpg" />
<img src="images/peli.jpg" />
<img src="images/bateau2.jpg" /><br />
<img src="images/dauphin.jpg" />
<img src="images/crabe.jpg" />
<img src="images/oiseau.jpg" />
 
<br />
<br />
<div id="divconteneur"STYLE="position:relative;top:150px;left:50px;">
<img id='divimagea' src="images/bateau.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb'src="images/peli.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>
 
</body>
</html>

Par contre j'aimerai surtout au rollover sur une miniature au dessus, que l'image s'affiche dans le diaporama et que celui ci reprenne à cette image.

Mais là j' n'y arrive pas du tout...

Si quelqu'un avait une idée pour réaliser ce genre de chose...

Merci beaucoup d'avance pour votre aide !

**vermine** · 16/08/2010, 11h14

Bonjour,

Je voulais proposer cette fonction-ci, appelée sur le onmouseover des images mais elle doit être retravaillée car il y a un problème au niveau des timers (plusieurs sont lancés en même temps):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function change_compteur(image_name)
{
   for(var i=0; i<tbimage.length; i++)
   {
      if(tbimage[i] == image_name)
      {
         if(i==tbimage.length-1)
            var j = 0;
         else
            var j = i++;
 
         compteur = i;
         clearTimeout(mon_timer);
         document.getElementById("divimagea").src = "images/"+image_name+".jpg";
         document.getElementById("divimageb").src = "images/"+tbimage[j]+".jpg";
         defilmage(i);
      }
   }
}

Avec évidemment mon_timer en globale et les setTimeout de la manière suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
mon_timer=setTimeout("defilmage()",25);

Je n'ai pas encore bien lu le script, donc le paremètre i passé à defilmage n'est sans doute pas le bon.

**Alexis35** · 16/08/2010, 11h18

Merci beaucoup pour cette réponse rapide!

Apparemment on est effectivement sur la bonne voie!

Par contre il y a un problème de défilement lorsque l'on fait un rollover sur la premiere ou la derniere image car a la reprise du diaporama elle fait un bon de deux images.

Et pour un meilleur affichage de de l'image sur laquelle on fait un rollover, j'afficher dans l'image la photo d'avant le rollover et dans l'image b la photo du rollover, sinon elle défile trop vite.

Bref, si une âme charitable veut bien continuer de m'aider je suis preneur! (pas trop doué en javascript!)

En attendant je continue de creuser!

**Alexis35** · 16/08/2010, 13h53

Trouvé!

Merci à toi Vermine de m'avoir aiguillé!

Le truc est de passé non pas le nom de l'image en parametre de la fonction mais le rang n-1 dans le tableau en commençant par le rang du deenier element pour la premiere photo (ici 5) et ensuite la fonction est la suivante pour ceux que ca inetrresse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function change_compteur(i)
{
         if(i==tbimage.length-1){
            var j = 0;
         }else{
            var j = i+1;
         }      
         compteur = j;
         clearTimeout(mon_timer);
         document.getElementById("divimagea").src = tbimage[i];
         document.getElementById("divimageb").src = tbimage[j];
         defilmage(0);
      }

Ca a l'air de fonctionner dans toutes les situations!

**vermine** · 16/08/2010, 13h55

Ha ben tant mieux. Bien joué.

Diapo Java script

JavaScript

Discussions similaires

Partager

Partager