[Résolu] Pb défilement image

Bonjour,

Je fais un site pour un graphiste, comme il y a pas mal d'image je préfère les faire défiler.
J'ai pour celà trouver un script java qui permet donc le défilement des images quand on passe sur une flèche.
En fait y'a 2 flèches, une en haut pour le défilement vers le haut, revenir vers la 1ère image.
Et une 2ème, pour descendre.
Or quand j'arrive à la dernière image, le défilement continu alors que je voudrais revenir à la 1ère.

voici ce que ça donne http://www.prikosnovenie.com/design/feminite.html

et le script (que j'ai recupéré d'où les incohérences)

<script language="javascript">

var Timer;
var Pas = 3; // vitesse défilement texte
var Img = 1; // le numéro de l'image à afficher
var End = 21; // le numéro de la dernière image

function moveLayer(Sens)
 {
 if(document.getElementById)
     Objet = document.getElementById("Contenu" );
 else
     Objet = document.all["Contenu"];
 if(parseInt(Objet.style.top) + (Pas*Sens) > 0)
     Objet.style.top = "0px";
 else
     Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
 Timer = setTimeout("moveLayer(" + Sens + " );", 50);
 }
 
 function changeImage(value) 
 { // si on avance value = 1, si on recule value = -1
     Img = Img + value ;
     if (value == 1) 
	 {
         if (Img > End)
             Img = 1; // si on dépasse la dernière image, on revient au début
     }
     else {
         if (Img < 1)
             Img = End; // si on dépasse la première image (en reculant), on passe à la dernière
     }
     if (Img >= 1 && Img <= 21)
         Img.src='Test/0'+Img+'.jpg'; // si c'est <= 9 on met un 0 devant
     else
         Img.src='Test/'+Img+'.jpg'; // sinon on affiche le numéro
 }


  
 </script>

Merci d'avance
Modifié par virus (11 Jul 2007 - 18:40)

Heu... juste pour une question bête...
... à quoi elle te sert changeImage ?
Je ne vois cette fonction appelée nulle part dans le code de ta page.
Modifié par aCOSwt (06 Jul 2007 - 00:34)

Effectivement elle ne sert pas merci pour ta remarque

J'y comprends pas grand chose au javascript

Il me reste donc

 <script language="javascript">

var Timer;
var Pas = 3; // vitesse défilement texte

function moveLayer(Sens)
 {
 if(document.getElementById)
     Objet = document.getElementById("Contenu" );
 else
     Objet = document.all["Contenu"];
 if(parseInt(Objet.style.top) + (Pas*Sens) > 0)
     Objet.style.top = "0px";
 else
     Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
 Timer = setTimeout("moveLayer(" + Sens + " );", 50);
 }
  
 </script>

Quelqu'un a t-il une idée pour que le défilement vers le bas s'arrête à la dernière image. Il le fait bien vers le haut en s'arrêtant à la 1ère image.

Merci.

En fait, ton JavaScript ne compte pas les images.
Si le défilement s'arrête quand on va vers le haut c'est que, dans ta fonction moveLayer, il y a une condition d'arrêt qui joue :

if(parseInt(Objet.style.top) + (Pas*Sens) > 0)

Mais tu n'as pas de condition d'arrêt qui joue dans l'autre sens.
Si tu veux arrêter dans l'autre sens alors il faut rajouter une condition sur Objet.style.top.

Ton script n'est pas idéalissime pour calculer la valeur exacte à tester.
Je pense qu'il te faudra quelques calculs et quelques essais pour trouver la bonne valeur de test.

Merci pour ta réponse.

J'y connais vraiment rien au javascript, bien que ce soit bien pratique mais j'ai pas vraiment la logique

On m'a indiqué ça:
1/ Recup de la hauteur du DIV contenant
2/ Recup de la hauteur du DIV contenu
3/ Test quand
le top du contenu est inférieur à -(Hauteur_Contenu -Hauteur_Contenant) on stoppe tout...

ça donnerai quoi en ajoutant une condition à Objet.style.top.
histoire qu je puisse essayer de faire un test en rentrant des valeurs

Merci encore pour vos conseils bienveillant

Une personne bienveillante m'a apporté la solution sur un autre forum.
Je la post ici, ça pourrait servir à quelqu'un

<script type="text/javascript" language="JavaScript">
var Timer;
var Pas = 3;  // vitesse défilement texte
var Img = 1;  // le numéro de l'image à afficher
var End = 11; // le numéro de la dernière image
var H_Fenetre = -1;
var H_Bandeau;
//----------------------
function moveLayer(Sens){
  var Obj;
  if( H_Fenetre < 0){
    //-- Recup hauteur objet defilant
    Obj = document.getElementById( "Contenu");
    H_Bandeau = Obj.offsetHeight;
    //-- Recup hauteur zone de defilement
    Obj = document.getElementById( "Support");
    H_Fenetre = Obj.offsetHeight;
  }
  //-- Recup Objet
  if(document.getElementById)
    Obj = document.getElementById("Contenu" );
  else
    Obj = document.all["Contenu"]; // Ne sert pas en grand chose

  //-- Recup Borne deplacement
  var Min_Y = -(H_Bandeau -H_Fenetre);
  var Pos_Y = parseInt(Obj.style.top) + (Pas*Sens); // prochaine position du DIV

  //-- Test des positions
  if( Pos_Y > 0){
    Obj.style.top = "0px"; // Place a zero
  }
  else{
    if( Pos_Y < Min_Y)
      Obj.style.top = Min_Y +"px";  // Place en position Haute mini
    else{
      //-- Deplacement autorise on deplace
      Obj.style.top = Pos_Y + "px";
      //-- et on y retourne
      Timer = setTimeout("moveLayer(" + Sens + " );", 50);
    }
  }
}
</script>

Il est cependant IMPORTANT de déclarer le DIV Contenu comme suit dans la page

<div id="Contenu" style="position: absolute; height:auto; left: 510px; top: 0px;">

Cela devrait baigner sur la plupart des navigateurs.