faux slider pour gens pressés [Sources]

**javatwister** · 18/12/2010, 11h54

suite à un message lu dans la semaine, je me suis amusé à refaire un vieux slider... en le rendant moins bien

le but est donc de faire un faux slider, ce qui économise énormément d'énergie et de paramètres de position (en fait, aucune définition css n'est nécessaire);

bilan:
- c'est pas joli et on revient au moyen-âge
- c'est très rapide à faire
- c'est économiquement très économique

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>...</title>
 
 
 
<style type="text/css">
 
img {
	margin-right:10px
}
 
.fl {
	padding-top:41px;
	height:100px;
	float:left;
	margin-left:10px;
}
 
#c1 {height:100px;
	width:400px;
	overflow:hidden;
	float:left;
	margin:0px;
 
}
 
#pict {padding-top:20px;
	height:100px;
 
	background-color:gray;
}
 
 
</style>
 
 
<script type="text/javascript">
 
// variables
var tab=[],long=0, p, f, timer, zero, delai=100;
 
// chargement des images
for(i=0;i!=60;i++){
	zero= i<9 ? 0 : "";
	tab[i]=new Image();
	tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
	tab[i].alt="image "+ i;
	tab[i].title="image "+ i;
}
 
// getElementById
function q(b){
	return document.getElementById(b);
}
 
// insertion des images, longueur de la bande d'images, gestionnaires "onmouse"
onload=function(){
 
	for(i=0;i!=60;i++){
		long+=tab[i].width+10;
		q("pict").appendChild(tab[i])
	}
 
	q("pict").style.width=long+40+"px";
 
	for(i=0;i<2;i++){
		q("fl"+[i]).ind=i;
		q("fl"+[i]).onmouseover=function(){f=this.ind;go()}
		q("fl"+[i]).onmouseout=function(){clearTimeout(timer)}
	}
 
}
 
// "pseudo déplacement" des images
function go(){
 
	if(f==0){
		q("pict").appendChild(q("pict").firstChild);
	}
	else{
		q("pict").insertBefore(q("pict").lastChild,q("pict").firstChild)
	}
 
	timer=setTimeout("go()",delai)
 
}
 
</script>
 
 
</head>
 
<body style="margin:100px">
 
 
<div class="fl">
	<img id="fl0" alt="fl" src="http://javatwist.imingo.net/flecheb.gif" />
</div>
 
<div id="c1">
	<div id="pict">
	</div>
</div>
 
<div class="fl">
	<img id="fl1" alt="fl2" src="http://javatwist.imingo.net/fleche.gif" />
</div>
 
 
</body>
</html>

**Bovino** · 18/12/2010, 12h52

Minimaliste en effet

Un exemple en ligne

**vermine** · 22/12/2010, 07h39

Ca reste sympa.

Merci javatwister.

faux slider pour gens pressés [Sources]

Contribuez

Discussions similaires

Partager

Partager