begin process at 2012 05 29 04:52:35
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

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

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

lundi 8 août 2011 à 14:17:47 | défilement d'images (horizontal) - aide sur mon code

lisa78
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:
Code 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 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>
<body>
<div id="support">
	<div style="width:25px; height:260px; position:absolute; left:0; z-index:10;">
		<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="img/felche_gauche.png" style="cursor:pointer; position:absolute; left:0;">
	</div>
	<ul id="travaux" style="position:absolute; top:0;left:0;width:1753px; margin:0 28px 0 28px;"> <!-- garder le style ici !!! -->
<li><img src="img/travaux/HEB/HEB14072011130706.gif" alt="" /></li>
<li><img src="img/travaux/HEB/HEB14072011130710.gif" alt="" /></li>
<li><img src="img/travaux/HEB/HEB14072011130718.gif" alt="" /></li>
<li><img src="img/travaux/HEB/HEB14072011130723.gif" alt="" /></li>
<li><img src="img/travaux/HEB/HEB14072011130726.gif" alt="" /></li>	
</ul>
	<div style="width:774px; height:260px; position:absolute; right:0;bottom:0; border-left:1px solid #000;">
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="img/felche_droite.png" style="cursor:pointer; position:absolute; right:0; bottom:0;">
	</div>
</div>	
</body>
</html>

lundi 8 août 2011 à 22:37:21 | Re : défilement d'images (horizontal) - aide sur mon code

mikeyjoy
salut lisa78,

essaye d'utiliser un autre script: télécharge celui-ci et place-le au même niveau que le fichier html :
Code 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>
<body>
<div id="support">
	<div style="width:25px; height:260px; position:absolute; left:0; z-index:10;">
		<img onmouseover="moveLayer('gauche');" onmouseout="t1.stop();" src="img/felche_gauche.png" style="cursor:pointer; position:absolute; left:0;">
	</div>
	<ul id="travaux" style="position:absolute; top:0;left:0;width:1753px; margin:0 28px 0 28px;"> <!-- garder le style ici !!! -->
<li><img src="img/travaux/HEB/HEB14072011130706.gif" alt="" /></li>
<li><img src="img/travaux/HEB/HEB14072011130710.gif" alt="" /></li>
<li><img src="img/travaux/HEB/HEB14072011130718.gif" alt="" /></li>
<li><img src="img/travaux/HEB/HEB14072011130723.gif" alt="" /></li>
<li><img src="img/travaux/HEB/HEB14072011130726.gif" alt="" /></li>	
</ul>
	<div style="width:774px; height:260px; position:absolute; right:0;bottom:0; border-left:1px solid #000;">
		<img onmouseover="moveLayer('droite');" onmouseout="t1.stop();" src="img/felche_droite.png" style="cursor:pointer; position:absolute; right:0; bottom:0;">
	</div>
</div>	
</body>
</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
lundi 15 août 2011 à 17:16:11 | Re : défilement d'images (horizontal) - aide sur mon code

lisa78
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&#8230;

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

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


  • on déclare d'abord les 2 variables (est-ce que duree correspond à la vitesse de déplacement?)

Code Javascript :
var posFinale 
var duree



  • on ouvre la fonction que l'on nomme "movelayer" et (Sens) pour droite ou gauche

Code Javascript :
function moveLayer(Sens){



  • on désigne l'objet touché en déclarant la variable "Objet"

Code Javascript :
var Objet = document.getElementById('travaux');



  • 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=?

Code Javascript :
	if (Sens=='droite'){
		posFinale = -(Objet.offsetWidth-document.getElementById('support').offsetWidth);
		duree = -(posFinale-(Objet.offsetLeft-28))/309;


  • Sinon (si le sens est gauche)
    la variable posFinale est égale à 0
    et la variable duree est égale à (0-(?-28))/309.5

Code Javascript :
	else {
		posFinale = 0;
		duree = (posFinale-(Objet.offsetLeft-28))/309;
	}


  • t1 c'est le déplacement?

Code Javascript :
	t1 = new Tween(Objet.style,'left',Tween.regular,(Objet.offsetLeft-28),posFinale,duree,'px');


  • t1.start c'est pour démarrer le déplacement?
    mais pourquoi il n'y a rien entre parenthèses

Code Javascript :
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&#8230; http://www.simplecomgraphics.ch/onLineTest/index.php?n=2&c=15 &#8230;pour voir de quoi je parle.

Merci


Cette discussion est classée dans : code, objet, var, sens, défilement

Répondre à ce message

Sujets en rapport avec ce message

Défilement iframe par boutton [ par essie974 ] Bonjour tout le monde, J'ai trouver un petit script sur le net me permettant de faire défiler le contenu de mon iframe de manière verticale, j'aimera modification code galerie photo [ par aiglon22 ] bonjour, je souhaiterai modifier le scripte d'une galerie photo trouvée sur le site d'alsacréations, [url=http://www.alsacreations.com/tuto/lire/557-g API Google Maps les markers [ par steppp ] Bonjour, Je sollicite votre aide pour un problème qui m'étonne. Il me paraîtrait logique qu'il y ait une erreur très simple mais pourtant je réécris jquery liscroller [ par phoenixgreg ] Hi tt le monde ! Voilà j'ai mon petit script jquery liscroller, il fonctionne très bien, le texte défile mais j'aimerais qu'il défile à la vertical ( concaténation variables ... [ par mageek06 ] Bonjour j'ai ceci : [code=js]var date1j = document.getElementById("date1j"); var date1m = document.getElementById("date1m"); var date1a = document. var i égale à quoi une fois que j = 3 dans une boucle [ par jimmyhendrix ] Salut ! J'ai un problème de boucle. En gros, j'ai un fichier xml qui représente mon array dans mon code : [code=js]var xmlDoc=null; if (window.XMLHt [JS/PHP] Vérifier plusieurs radios d'un form [ par mymemorial ] Bonjour, J'ai un formulaire en PHP que je remplis à l'aide d'une base de donnée mySQL. J'ai donc plusieurs questions et plusieurs choix qui sont affe Un ^peu d`aide si possible [ par SamJC ] Bonjour, j'avais besoin de laide en JS donc je me suis inscrit a ce site, si c'est possible sa serait apprecier Donc, comme exercice pour une classe c jquery liscroller aide ! [ par phoenixgreg ] Hi tt le monde ! Voilà j'ai mon petit script jquery liscroller, il fonctionne très bien, le texte défile mais j'aimerais qu'il défile à la vertical ( XMLHttpRequest dans une boucle [ par Psype ] Bonjour, j'ai un petit souci avec un bout de code, je ne vois pas trop comment écrire ceci... Le but est de récupérer les données d'une page du même


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,484 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)