[JavaScript] 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.

18/12/2010, 12h52	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Minimaliste en effet Un exemple en ligne __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

22/12/2010, 07h39	#3
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 768 Points : 5 768	Ca reste sympa. Merci javatwister. __________________ Elen Poukram - Isegoria - Sandawe
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email