script d'images défilantes 2 fois dans la même page
Bonjour,
je cherche de l'aide pour réaliser la page d'accueil d'un site. Je voudrais mettre deux bandeaux d'images qui défilent chacun avec leur propre flêche de défilement. Si je ne mets qu'un seul bandeau cela fonctionne parfaitement par contre si j'essai de mettre 2 fois le script je n'y arrive plus.
Je ne suis pas connaisseuse de JavaScript et j'i fait beaucoup de recherche sur le web mais ne trouvant pas la solution je me tourne vers vous.
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
| var initialisation = false
var vitesse = 10;
var temps = 0;
var contenu = null;
var longueur = 0;
var cadre = 480;
function aller_gauche()
{
INIT();
if( parseInt( contenu.style.left ) > (cadre - longueur) )
{
contenu.style.left = Math.max(cadre - longueur, parseInt( contenu.style.left ) - vitesse);
temps = setTimeout(aller_gauche, 40);
}
}
function aller_droite()
{
INIT();
if( parseInt( contenu.style.left ) < 0 )
{
contenu.style.left = Math.min(0, parseInt( contenu.style.left ) + vitesse);
temps = setTimeout(aller_droite, 40);
}
}
function placement_fin()
{
INIT();
STOP();
contenu.style.left = 0;
}
function placement_debut()
{
INIT();
STOP();
contenu.style.left = cadre - longueur;
}
function STOP()
{
if( temps )
{
clearTimeout(temps);
temps = 0;
}
}
function INIT()
{
if( !initialisation )
{
contenu = document.getElementById( "content" )
var obj = document.getElementById( "container" );
if( obj )
{
longueur = obj.scrollWidth;
cadre = obj.clientWidth;
}
initialisation = true;
}
} |
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
| <table cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img onDblClick="placement_fin();" onMouseOver="aller_droite();style.cursor='pointer';"
onMouseOut="STOP();this.style.cursor='';" title="Double-cliquez pour atteindre le début de la liste" src="photos/array_left.gif"
align="center" border="0"> </td>
<td align="center" valign="top">
<div id="container" style="OVERFLOW: hidden; WIDTH: 350px; POSITION: relative;">
<div id="content" style="LEFT: 0px; POSITION: relative;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top"><a href="photos/accueil_ta/chateau.jpg" target="_blank"><img src="photos/accueil_ta/mini/chateau.jpg" alt="" width="124" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/levage_vide.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_vide.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/ecureuil.jpg" target="_blank"><img src="photos/accueil_ta/mini/ecureuil.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/incendie.jpg" target="_blank"><img src="photos/accueil_ta/mini/incendie.jpg" alt="" width="56" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/prisedevue_2.jpg" target="_blank"><img src="photos/accueil_ta/mini/prisedevue_2.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/laperdrix_levage.jpg" target="_blank"><img src="photos/accueil_ta/mini/laperdrix_levage.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/levage.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/levage_jaude.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_jaude.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/prisedevue.jpg" target="_blank"><img src="photos/accueil_ta/mini/prisedevue.jpg" alt="" width="124" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/helico_dos.jpg" target="_blank"><img src="photos/accueil_ta/mini/helico_dos.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/levage_2helico.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_2helico.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
<td valign="top"><a href="photos/accueil_ta/levage_2helico_2.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_2helico_2.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
</tr>
</table>
</div>
</div>
</td>
<td align="center"><img onDblClick="placement_debut();" onMouseOver="aller_gauche();style.cursor='pointer';"
onMouseOut="STOP();style.cursor='';" title="Double-cliquez pour atteindre la fin de la liste" src="photos/array_right.gif"
align="center" border="0">
</td>
</tr>
</table> |
