Faire défiler élément

**HaTnuX** · 08/02/2007, 11h29

Bonjour à tous

Alors voilà je voudrais faire défiler des éléments, en gros je possède une liste tel que :

Produit 1
Produit 2
Produit 3

Situé dans un cadre, et toutes les 5 secondes je voudrais qu'il y ait permutation entre ces éléments. Par exemple au bout des 5 premières secondes la liste deviendra :

Produit 2
Produit 3
Produit 1

Et pendant le changement je voudrais qu'il y ai un effet de glissement, genre quand Produit 2 monte il efface au fur et à mesure Produit 1.

J'ai trouvé des petites choses pour le faire, mais toujours en rapport avec flash, et ça m'intéresse pas du tout

Vous avez une idée ?
Vous pensez que ça serait plus approprié dans la section CSS ?

Merci beaucoup

**Auteur** · 09/02/2007, 01h01

bonjour,

voilà un début :

Code html :

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
142
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
 
<style type="text/css">
<!--
.conteneur{
 border: 3px outset #555555;
 background-color: #EEEEEE;
 height: 200px;
 width: 200px;
 position:relative;
 /*top: 50px;
 left: 80px; */
}
 
 
.divImages img{
 height: 80px;
 margin: 0px;
 padding: 0px;
 vertical-align: middle;
}
 
.divImages{
 text-align: center;
 border: 2px outset #AAAAAA;
 background-color: #FFFFFF;
 padding: 10px;
 margin: 0px;
 position: absolute;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var idMax = 3;
var idMin = 0;
var idCourant;
var chrono=null;
 
function initPos(idStart)
{
  var i, elmt, dx, dy, dlt;
  idCourant = idStart;
 
  dx = 10;
  dy = 10;
 
  dlt = 20;
 
  for (i=0; i<=3; i++)
  {
     elmt = document.getElementById("idDiv"+idStart);
     elmt.style.top = dy+"px";
     elmt.style.left = dx+"px";
     elmt.style.zIndex = i;
 
     dx+=dlt;
     dy+=dlt;
 
     idStart++;
     if (idStart>idMax)
        idStart = idMin;
  }
}
 
function suivant()
{
  idCourant--;
  if (idCourant<0)
     idCourant = idMax;
  initPos(idCourant);
}
 
function precedent()
{
 idCourant++;
 if (idCourant>idMax)
    idCourant = 0;
   initPos(idCourant)
}
 
function marche()
{
  chrono = setInterval("suivant()","5000");
}
 
function arret()
{
  if (chrono!=null)
  {
     clearInterval(chrono);
     chrono = null;
  }
}
 
//-->
</script>
 
</head>
 
<body onload="initPos(0)" onunload="arret()">
<br />
 
<div class="conteneur" id="conteneur">
     <div id="idDiv0" class="divImages">
          <img src="clair19.jpg" />
     </div>
     <div id="idDiv1" class="divImages">
          <img src="clair33.jpg" />
     </div>
     <div id="idDiv2" class="divImages">
          <img src="blue2.jpg" />
     </div>
     <div id="idDiv3" class="divImages">
          <img src="blue3.jpg" />
     </div>
</div>
 
<br />
<div>
 
<!-- Mode manuel -->
<!--
<input type="button" value="suivant" onclick="suivant()">
<input type="button" value="précédent" onclick="precedent()"><br />
-->
 
<!-- mode automatique -->
<input type="button" value="marche" onclick="marche()">
<input type="button" value="stop" onclick="arret()">
 
</div>
 
</body>
 
</html>

Par contre pour un effet de glissement....

c'est plus difficile à élaborer.

**HaTnuX** · 09/02/2007, 09h03

Heu perso ça marche pas

J'ai juste changé les images, il initilise bien leur position avec un certain décalage, mais quand je fais suivant, ou marche, ou tout autre bouton, rien ne se passe

Bon sinon pour simuler un glissement, on m'a donné yui :

http://developer.yahoo.com/yui/animation/

Vraiment pratique !

Par contre j'aimerais bien pouvoir faire fonctionner ton bout de code, ça m'interesserais

Il marche chez toi ?

**Auteur** · 09/02/2007, 10h11

Envoyé par HaTnuX

Heu perso ça marche pas

J'ai juste changé les images, il initilise bien leur position avec un certain décalage, mais quand je fais suivant, ou marche, ou tout autre bouton, rien ne se passe

(...)
Il marche chez toi ?

Tu m'a fais douter mais, oui, ça marche avec IE et Firefox. Dans la fonction marche(), j'ai mis une temporisation de 5 secondes, ce qui peut sembler un peu long....
Quel navigateur utilises-tu et quelles erreurs renvoie-t-il ?

Faire défiler élément

JavaScript

Vue hybride

Discussions similaires

Partager

Partager