défilement images javascript
Bonjour,
voici le code de défilement des images:
Code:
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
|
<style type="text/css">
.conteneur, .cellule{
height: 121px; /* valeur modifiable ;-) /!\ entrer des valeurs en pixel /!\ */
width: 194px;
}
.conteneur1, .cellule1{
height: 198px; /* valeur modifiable ;-) /!\ entrer des valeurs en pixel /!\ */
width: 162px;
}
.conteneur1
{
border: 3px #AAAAAA ridge; /* bordure du conteneur */
overflow: hidden; /* on cache les barres de défilement */
padding: 0px;
}
.conteneur{
border: 3px #AAAAAA ridge; /* bordure du conteneur */
overflow: hidden; /* on cache les barres de défilement */
padding: 0px; /* pas de marge intérieure */
}
/* proprités de la cellule (contient le texte et l'image) */
.cellule{
text-align: center; /* alignement des composants dans la cellule */
border: none;
cursor: pointer; /* curseur en forme de main */
padding: 0px; /*pas de padding ni de margin !! (comportement différent sous IE et FF) */
margin: 0px;
/* propriétés du texte dans la cellule */
color: #000000;
font-family: Comic Sans MS;
font-size: 12pt;
background-color: #DDDDFF;
}
.cellule1{
text-align: center; /* alignement des composants dans la cellule */
border: none;
cursor: pointer; /* curseur en forme de main */
padding: 0px; /*pas de padding ni de margin !! (comportement différent sous IE et FF) */
margin: 0px;
/* propriétés du texte dans la cellule */
color: #000000;
font-family: Comic Sans MS;
font-size: 12pt;
background-color: #DDDDFF;
}
/* propriétés de l'image contenue dans la cellule */
.image{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
height: 122px; /* taille de l'image */
width: 194px;
}
.image1{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
height: 198px; /* taille de l'image */
width: 165px;
}
</style>
<script type="text/javascript">
/*
chemin => chemin relatif des images
tabImg => nom des images
tabTxt => légende des images
*/
var chemin = "IMG/";
var tabImg = new Array("arton50.jpg","jpg/pers-arrie-cre1.jpg","arton3.jpg","jpg/PC6-insertion2.jpg");
var tabTxt = new Array("Cliquez pour voir les biens");
var attente = "3000"; //délai d'affichage d'une image en ms
// Action à réaliser lors du clic sur une cellule.
// id est de la forme "celluleX" avec X compris entre 0 et tabImg.length-1
function clicSurImage(objCellule)
{
//alert(objCellule.id);
switch (objCellule.id)
{
case "cellule0" : //action a réaliser lors du clic sur la cellule 0
window.location ="?page=programmes_neufs&id_rubrique=44&id_article=50&T1=T1&T2=T2&T3=T3&T4=T4";
break;
case "cellule1" : //action a réaliser lors du clic sur la cellule 1
window.location ="?page=programmes_neufs&id_rubrique=44&id_article=50&T1=T1&T2=T2&T3=T3&T4=T4";
break;
case "cellule2" : //action a réaliser lors du clic sur la cellule 2
window.location ="?page=programmes_neufs&id_rubrique=10&id_article=3&T1=T1&T2=T2&T3=T3&T4=T4";
break;
case "cellule3" :
window.location ="?page=programmes_neufs&id_rubrique=10&id_article=3&T1=T1&T2=T2&T3=T3&T4=T4";
break;
}
}
/*********************************************************/
//***** Fonctions du diaporama *****//
var tempo = "1";
var pas = 2;
var chrono;
var posFin, conteneur, sens;
// Ajout des images et du texte dans le div conteneur
function creationDiaporama()
{
var i;
var imgDiapo, txtDiapo, crlf;
var divDiapo;
var conteneur = document.getElementById("conteneur");
var Nom = navigator.appName;
if (Nom == 'Microsoft Internet Explorer')
{
conteneur.className = "conteneur1";
}
for (i=0; i<tabImg.length; i++)
{
//Creation du conteneur image+texte
divDiapo = document.createElement("div");
if (Nom == 'Microsoft Internet Explorer')
{
divDiapo.className = "cellule1";
}
else
{
divDiapo.className = "cellule";
}
//divDiapo.className = "cellule";
divDiapo.id = "cellule"+i;
divDiapo.objetCellule = divDiapo;
divDiapo.onclick = function(){clicSurImage(this.objetCellule);}
// Création du noeud image
imgDiapo = document.createElement("img");
imgDiapo.src = chemin+tabImg[i];
if (Nom == 'Microsoft Internet Explorer')
{
imgDiapo.className = "image1";
}
else
{
imgDiapo.className = "image";
}
//imgDiapo.className = "image";
// Création du saut de ligne
//crlf = document.createElement("br");
// Création du noeud texte
//txtDiapo = document.createTextNode(tabTxt[i]);
// Ajout des éléments dans le div
divDiapo.appendChild(imgDiapo);
//divDiapo.appendChild(crlf);
//divDiapo.appendChild(txtDiapo);
// Ajout du div dans le div conteneur parent
conteneur.appendChild(divDiapo);
}
var divFixed = document.createElement("div")
divFixed.innerHTML = tabTxt[0];
divFixed.style.position = "absolute";
divFixed.style.top = "390px";
divFixed.style.left = "810px";
divFixed.style.fontWeight = "bold";
divFixed.style.color= "#FFFFFF";
divFixed.style.fontSize= "12";
divFixed.style.fontFamily= "Arial, Helvetica, sans-serif";
divDiapo.appendChild(divFixed);
chrono = setTimeout("deroule()",attente);
}
// Détermination du sens de défilement des images et des distances à parcourir
function deroule()
{
var distance;
conteneur = document.getElementById("conteneur");
distance = conteneur.scrollHeight / tabImg.length;
if (conteneur.scrollTop + distance >=conteneur.scrollHeight)
{
sens = -1;
}
if (conteneur.scrollTop<distance)
{
sens = 1;
}
posFin = conteneur.scrollTop + sens * distance;
chrono = setTimeout("defileImage()", tempo);
}
// Défilement des images
function defileImage()
{
conteneur.scrollTop = conteneur.scrollTop + sens * pas;
if (sens == 1)
{
if (conteneur.scrollTop<posFin)
chrono = setTimeout("defileImage()", tempo);
else
chrono = setTimeout("deroule()",attente);
}
else
{
if (conteneur.scrollTop>posFin)
chrono = setTimeout("defileImage()", tempo);
else
chrono = setTimeout("deroule()",attente);
}
// Pour debugage ;-)
/*document.getElementById('idTest').innerHTML=conteneur.scrollTop + " / " + posFin;*/
}
// Réinitialisation du diaporama lors de la fermeture de la page
function stopDiaporama()
{
clearTimeout(chrono);
document.getElementById("conteneur").scrollTop = 0;
}
</script> |
mon problème c'est que le défilement fait un seul tour et s'arrête,j'ai constaté que ça est due à la hauteur des images au niveau du style.
voici le site qui contient le bloc de défilement des images:
http://www.eci-immobilier.fr/spip.ph..._mode=recalcul
Merci de votre aide.
