défilement images horizontal

Version imprimable

bonjour !

je cherche à faire un défilement horizontal d'images avec clic et à chaque extremité un bouton pour défiler à gauche ou à droite.

j'ai trouvé un exemple pour défilement vertical voici le code :

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
<html>
<head>
<title>demo</title>
<script language="javascript" type="text/javascript">
var Timer=null;
var Pas = 3;
function moveLayer(Sens) {
	var Objet=document.getElementById("contenu");
    if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
		clearTimeout(Timer);
	}
	else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support").offsetHeight)) {
		clearTimeout(Timer);
	}
    else {
        Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
	}
	Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}
</script>
</head>
<body>
<div id="support" style="position:relative; width:150px; height:280px; overflow:hidden; border:1px solid #000;">	
	<div id="contenu" style="position:absolute; top:0;">
		DEBUT<br />ligne1<br />ligne2<br />ligne3<br />ligne4<br />ligne5<br />ligne6<br />
 
		ligne7<br />ligne8<br />ligne9<br />ligne10<br />ligne11<br />ligne12<br />ligne13<br />
		ligne14<br />ligne15<br />ligne16<br />ligne17<br />ligne18<br />ligne19<br />FIN<br />
 
	</div>
	<div style="background-color:#0F0; width:22px; height:280px; position:absolute; right:0; border-left:1px solid #000;">
		<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="http://www.wikistuce.info/lib/exe/fetch.php/javascipt/slideup.png?w=&h=&cache=cache" style="cursor:pointer; position:absolute; right:0;">
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="http://www.wikistuce.info/lib/exe/fetch.php/javascipt/slidedown.png?w=&h=&cache=cache" style="cursor:pointer; position:absolute; right:0; bottom:0;">		
	</div>
</div>
</body>
</html>

ça marche très bien,

j'ai essayé d'adapter mais sans succès.

Quelqu'un peut avoir une idée ou lien.

23/10/2009, 16h39
Matthieu2000

change le top en left
23/10/2009, 16h50
pyramidesoft

Citation:

Envoyé par Matthieu2000

change le top en left

C'est la premiere idée : que j'avais eu, malheureusement sans succès

top en left, offsetHeight en offsetWidth et 2 3 trucs en css...

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
<html>
<head>
<title>demo</title>
<script language="javascript" type="text/javascript">
var Timer=null;
var Pas = 3;
function moveLayer(Sens) {
	var Objet=document.getElementById("contenu");
    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" style="position:relative; width:280px; height:150px; overflow:hidden; border:1px solid #000;">
	<div id="contenu" style="position:absolute; top:0;left:0;width:400px">
		DEBUT - ligne1 - ligne2 - ligne3 - ligne4 - ligne5 - ligne6 -
 
		ligne7 - ligne8 - ligne9 - ligne10 - ligne11 - ligne12 - ligne13 -
		ligne14 - ligne15 - ligne16 - ligne17 - ligne18 - ligne19 - FIN -
 
	</div>
	<div style="background-color:#0F0; width:280px; height:22px; position:absolute; right:0;bottom:0; border-left:1px solid #000;">
		<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="http://www.wikistuce.info/lib/exe/fetch.php/javascipt/slideup.png?w=&h=&cache=cache" style="cursor:pointer; position:absolute; left:0;">
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="http://www.wikistuce.info/lib/exe/fetch.php/javascipt/slidedown.png?w=&h=&cache=cache" style="cursor:pointer; position:absolute; right:0; bottom:0;">
	</div>
</div>
</body>
</html>

Citation:

Envoyé par gwyohm

top en left, offsetHeight en offsetWidth et 2 3 trucs en css...

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
<html>
<head>
<title>demo</title>
<script language="javascript" type="text/javascript">
var Timer=null;
var Pas = 3;
function moveLayer(Sens) {
	var Objet=document.getElementById("contenu");
    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" style="position:relative; width:280px; height:150px; overflow:hidden; border:1px solid #000;">
	<div id="contenu" style="position:absolute; top:0;left:0;width:400px">
		DEBUT - ligne1 - ligne2 - ligne3 - ligne4 - ligne5 - ligne6 -
 
		ligne7 - ligne8 - ligne9 - ligne10 - ligne11 - ligne12 - ligne13 -
		ligne14 - ligne15 - ligne16 - ligne17 - ligne18 - ligne19 - FIN -
 
	</div>
	<div style="background-color:#0F0; width:280px; height:22px; position:absolute; right:0;bottom:0; border-left:1px solid #000;">
		<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="http://www.wikistuce.info/lib/exe/fetch.php/javascipt/slideup.png?w=&h=&cache=cache" style="cursor:pointer; position:absolute; left:0;">
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="http://www.wikistuce.info/lib/exe/fetch.php/javascipt/slidedown.png?w=&h=&cache=cache" style="cursor:pointer; position:absolute; right:0; bottom:0;">
	</div>
</div>
</body>
</html>

ça fonctionne correctement,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="javascript" type="text/javascript">
var Timer=null;
var Pas = 5;
function moveLayer(Sens) {
	var Objet=document.getElementById("contenu");
    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>