Défilement d'images (horizontal) - aide sur mon code

Signaler
Messages postés
16
Date d'inscription
lundi 26 octobre 2009
Statut
Membre
Dernière intervention
15 août 2011
-
Messages postés
16
Date d'inscription
lundi 26 octobre 2009
Statut
Membre
Dernière intervention
15 août 2011
-
Bonjour,

j'aurais besoin d'un petit coup de pouce pour un bout de code javascript (que je ne comprends pas à 100%).

ça fonctionne mais ça saccade: que dois-je corrigé?
quelqu'un peut-il m'aider? MERCI

Voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script language="javascript" type="text/javascript">
var Timer=null;
var Pas = 6;
function moveLayer(Sens) {
var Objet=document.getElementById("travaux");
    if(parseInt(Objet.style.left) + (Pas*Sens)>0)  {
clearTimeout(Timer);
}
else if(parseInt(Objet.style.left) + (Pas*Sens)<-(Objet.offsetWidth-document.getElementById("support").offsetWidth)) {
clearTimeout(Timer);
}
    else {
        Objet.style.left = (parseInt(Objet.style.left) + (Pas*Sens)) + "px";
}
Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}
</script>

</head>








 <!-- garder le style ici !!! -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>	









</html>

2 réponses

Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011

salut lisa78,

essaye d'utiliser un autre script: télécharge celui-ci et place-le au même niveau que le fichier html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="Tween.js"></script>
<script language="javascript" type="text/javascript">
var posFinale
var duree
function moveLayer(Sens){
var Objet = document.getElementById('travaux');
if (Sens=='droite'){
posFinale = -(Objet.offsetWidth-document.getElementById('support').offsetWidth);
duree = -(posFinale-(Objet.offsetLeft-28))/309.5;
}
else {
posFinale = 0;
duree = (posFinale-(Objet.offsetLeft-28))/309.5;
}
t1 = new Tween(Objet.style,'left',Tween.regular,(Objet.offsetLeft-28),posFinale,duree,'px');
t1.start();
}
</script>

</head>








 <!-- garder le style ici !!! -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>	









</html>



c'est un script gratuit, très complet et assez simple d'utilisation. si tu lis l'anglais, tu peux en savoir plus ici.
sinon, tu peux modifier dans ce que j'ai fait: la vitesse de défilement, en changeant dans la variable duree le nombre 309.5


Cordialement
Messages postés
16
Date d'inscription
lundi 26 octobre 2009
Statut
Membre
Dernière intervention
15 août 2011

Waw!

Merci pour la réponse super rapide.

ça serait super si je pouvais avoir quelques explications supplémentaires, parce que ça ne bouge pas…

J'ai essayer de comprendre par moi même mais en vain.

Bon voilà ce que j’ai compris étape par étape (veuillez excuser d'énoncer l'évidence mais je suis plus que débutante):

[list]
[*] on déclare d'abord les 2 variables (est-ce que duree correspond à la vitesse de déplacement?)
/list
var posFinale 
var duree


[list]
[*] on ouvre la fonction que l'on nomme "movelayer" et (Sens) pour droite ou gauche
/list
function moveLayer(Sens){


[list]
[*] on désigne l'objet touché en déclarant la variable "Objet"
/list
var Objet = document.getElementById('travaux');


[list]
[*] si la flèche de droite est "enclenchée" (est-ce qu'il y a un lien avec t1.start(); ?)

ensuite je comprends pas vraiment

la variable "posFinale" sera égale à -(la largeur de l'ul 'travaux' - la largeur de la div 'support') en l'occurrence -(1753px-474px)=-1261
et la variable duree sera égale à -(posFinale-(la position left de l'ul 'travaux'))/309.5 en l'occurrence -(-1261(?-28))/309.5=?
/list
	if (Sens=='droite'){
posFinale = -(Objet.offsetWidth-document.getElementById('support').offsetWidth);
duree = -(posFinale-(Objet.offsetLeft-28))/309;

[list]
[*] Sinon (si le sens est gauche)
la variable posFinale est égale à 0
et la variable duree est égale à (0-(?-28))/309.5
/list
	else {
posFinale = 0;
duree = (posFinale-(Objet.offsetLeft-28))/309;
}

[list]
[*] t1 c'est le déplacement?
/list
	t1 = new Tween(Objet.style,'left',Tween.regular,(Objet.offsetLeft-28),posFinale,duree,'px');

[list]
[*] t1.start c'est pour démarrer le déplacement?
mais pourquoi il n'y a rien entre parenthèses
/list
t1.start();


Si j'ai besoin de comprendre tout ça c'est parce que le code que j'ai envoyer précédemment, je l'ai simplifier. Il y a en fait plusieurs "fenêtre défilant" avec chaque fois un nombre d'images différents… http://www.simplecomgraphics.ch/onLineTest/index.php?n=2&c=15 …pour voir de quoi je parle.

Merci