bonjour
je débute vraiment en javascript. j'ai trouvé un script que j'ai adapté pour un site.Il s'agit d'un diaporama panoramique. Il me convient mais je souhaiterais une modification que je n'arrive pas à réaliser.
Comme vous pouvez le voir sur le lien ci-dessous, les photos du diaporama du haut défilent à gauche ou à droite mais en boucle, c'est là mon problème.
Je voudrais que celles-ci défilent et s'arrêtent par rapport à sa dimension vers la gauche ou la droite.
voici le lien : http://galaxyweb.free.fr/systeme.php

voici le code:
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
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
<!--//
// personalisation de la fenêtre d'affichage du diaporama
function PL(){ 
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
}
function TT(){ 
 
MX=7 // Entrez le nombre Total d'images
}
image="diaporama360/photos/stockholm1.jpg"; // l'adresse complete de l'image à afficher au demarrage
/*
Donnez l'adresse complete de chaque image et tenez compte que vous avez la possibilité d'importer 
des images externes de toutes sortes dans les mêmes dimentions que le diaporama
*/
var imgUrl=new Array(); 
imgUrl[0]="diaporama360/photos/stockholm1.jpg"; 
imgUrl[1]="diaporama360/photos/stockholm.jpg"; 
imgUrl[2]="diaporama360/photos/etoile.gif"; 
imgUrl[3]="diaporama360/photos/images.gif"; 
imgUrl[4]="diaporama360/outils/background.jpg"; 
imgUrl[5]="diaporama360/photos/ciel.jpg"; 
imgUrl[6]="diaporama360/photos/soir.jpg"; 
 
/*
la liste d'images: entrez ici les noms ou les titres des images
*/
 
op = '<option value="'
fop = '</option>'
 
image1  = op+imgUrl[0]+'">Bienvenus'+fop;
image2  = op+imgUrl[1]+'">stockholm'+fop; 
image3  = op+imgUrl[2]+'">Des étoiles'+fop;
image4  = op+imgUrl[3]+'">Des images'+fop;
image5  = op+imgUrl[4]+'">Background mobil'+fop;
image6  = op+imgUrl[5]+'">Ciel sur mer'+fop;
image7  = op+imgUrl[6]+'">Beauté du soir'+fop; // Ajouter des option, si vous voulez 
 
L = image1+image2+image3+image4+image5+image6+image7 // entrez ici les nouvelles images dans l'ordre
 
 
/*
création du diaporama
*/
 
Limg=498 ; // Largeur de l'image
Himg=220 ; // Hauteur de l'image
/*
creation de la commande de vitesse
*/
Mask="diaporama360/outils/gif1.gif"; // adresse comlete de l'image mask
Lmsk=60 ; // Largeur de l'image mask
Hmsk=240 ; // Hauteur de l'image mask
Lmskstop=12 ; // Largeur de la commande Stop
bordure=1 ; // si vous ne voulez pas de bordure alors mettez 0
couleur="#003366" ; // entrez la couleur de la bordure
document.write('<style type="text/css" media="screen">');
document.write('#Diapo360{width: '+ Limg + 'px; height: '+ Himg +'px; background-color:#000000;}'+'IMG {cursor: pointer;};');
document.write('</style>');
var Diapo360 = document.getElementById("Diapo360");
Diapo360.style.border      = "solid "+bordure+"px "+couleur;
Diapo360.style.background  = "url("+image+")  repeat";
X = 1;   // glissement à un coté
Y = -1;  // glissement inversé
D = 10;  // vitesse de rotation
/*
image mask pour variation de vitesse
*/
imd= '<img onmouseover=\'Y = ';
imf= '\' border=0 src=diaporama360/outils/gif1.gif width='+Lmsk+' height='+Hmsk+'>';
/*
la largeure de l'image mask pour le stop
*/
imfs= '\' border=0 src='+Mask+' width='+Lmskstop+' height='+Hmsk+'>';
setInterval('Deroulement()', 90); // 90 = Duré du pause
function Deroulement()
{
X += Y / D*100 ;
document.getElementById("Diapo360").style.backgroundPosition = X + "px";
}
/*
creation et affichage des images maske pour commonder la vitesse 
Pour augmenter ou deminuer la vitesse à droite et à gauche Vous pouvez modifier les valeurs dans les lignes suivantes
pour faire tourner avec ou contre le mouvement du curseur il suffit de changer les valeurs positive contre les valeurs negatives au lignes suivantes.
*/
var editer  = ""+
imd+ 7 + imf+
imd+ 2.5 + imf+
imd+ 0.7 + imf+
imd+ 0.3 + imf+
imd+ 0 + imfs+ // la commonde du stop
imd+ -0.3 + imf+
imd+ -0.7 + imf+
imd+ -2.5 + imf+
imd+ -7 + imf+
""; // on peut ajouter et supprimer des masks de vitesse dans les deux sens
Diapo360.innerHTML =(editer);
/*
Option de sélection et remplacement d'images
*/ 
var selection = 0;
function versplus() {
TT()
// annonce la fin du diaporama
if (selection >=MX-1)
alert('Fin du diaporama pour afficher d\'autres images \n\rCliquer sur: [ <<= ]\r\nOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection < document.forms[1].elements[0].length-1) {selection ++;} 
document.forms[1].elements[0].selectedIndex=selection;
}
function versmoins() {
// annonce le debut du diaporama
if (selection == 0)
alert('Debut du diaporama pour afficher d\'autre images \n\rCliquer sur: [ =>> ]\r\nOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection > 0) {selection --;} 
document.forms[1].elements[0].selectedIndex=selection;
}
function ChoiX(selection) {
document.forms[1].elements[0].selectedIndex = selection;
}
// Affiche l'image sélectionnée sur la liste deroulante
function ApLiQuE() {
selection = document.forms[1].elements[0].selectedIndex;
document.Diapo360.style.backgroundImage = "url("+ imgUrl[selection] +")";
}
// Création des liens
function changeliens(FF,x)
{
if(document.getElementById)
document.getElementById(x).innerHTML = FF;
}
// Affichage des liens
function AFICHE()
{
changeliens('<a title="afficher la page d\'information" target=_blank href='+document.imageimportee.choix.value+'.htm><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 3px" border=0 src=outils/apage.gif width=16 height=16> Page','lien_page'); changeliens('<a title="afficher l\'image entière" target=_blank href='+document.imageimportee.choix.value+'><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 5px" border=0 src=outils/aimage.gif width=16 height=16> Image','lien_image');
}
CO='<span style="FONT-SIZE: 7pt"><a title="Pur Tout Contact Cliquez ICI" style="TEXT-DECORATION: none" href="http://siv.site.voila.fr/index.htm" target="_blank"><font color="#353535"></font></a></span>';
// Tres important: si vous utilisez des images importés d'autres emplassements... vous devez créer un liens vers la page d'information en relation, si non suprimez le liens de la page.
// -->
Merci de votre réponse