Div dynamique en JS

**jojojo84** · 01/12/2010, 20h39

Salut à tous,

J'ai codé avec un ami une sorte de slide dynamique qui fait defiler verticalement 4 images successivements toutes les 3 secondes. On aimerait que pendant les 3 secondes durant lesquelles l'image reste affichée, une DIV contenant le title de l'image (ou au pire un texte ajouté au préalable dans le code) rentre sur l'image par le côté gauche jusqu'au centre, puis reparte d'où elle vient. Je ne sais pas si je suis clair dans ce que je veux mais j'espère l'être

Si quelqu'un peut m'aiguiller ou même me proposer un p'tit script qui fait ça que je pourrai adapter à mon code par la suite ce serait beau

Merci d'avance

**RomainVALERI** · 02/12/2010, 00h08

Dans la mesure où tu utilises un slide dynamique, je supposerai que tu importes une librairie ^^ (genre jQuery, Mootools, Prototype, ExtJS, ... ou même quelque chose de plus petit, ciblé sur quelques fonctionnalités thématiques)
(il y a tout-à-fait moyen de se passer de librairies pour ça, cf. cette intéressante discussion mais mon intuition me dit que tu n'as pas codé tes fonctions à la main ^^)

Juste pour être sûr : as-tu vérifié que ta librairie ne propose pas déjà ce genre de fonctionnalités ?

**jojojo84** · 02/12/2010, 11h04

Non nous n'utilisons pas de librairies

**jojojo84** · 02/12/2010, 11h11

Voici mon code pour ceux qui auraient la merveilleuse idée de me donner un coup de pouce parce que je pige vraiment pas

Le sliderJavascript.js

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
117
118
119
120
121
122
123
 
var tableauImage = new Array("image01.jpg","image02.jpg","image03.jpg","image04.jpg");
var tabTxt = new Array("img1", "img2", "img3", "img4");
 
// Temps d'attente entre 2 images
var attente = "3000";
 
// Variables du slider
var vitesse = 1;
var temps;
var positionFin, conteneur, sens;
var tempsTexte;
var texte;
 
// Ajout des images dans la div conteneur
function creationSlide()
{
	var i;
	var imageSlide;
	var divSlide;
	var conteneur = document.getElementById("conteneur");
 
	for (i=1; i<tableauImage.length; i++)
	{
		// Creation du conteneur image
		divSlide = document.createElement("div");
		divSlide.className = "cellule";
		divSlide.id = "cellule"+i;
		divSlide.objetCellule = divSlide;
 
		// Creation de l'image
		imageSlide = document.createElement("img");
		imageSlide.src = tableauImage[i];
		imageSlide.className = "image";	
 
		// Ajout de l'image dans la div
		divSlide.appendChild(imageSlide);
 
		// Ajout du div dans le div conteneur
		conteneur.appendChild(divSlide);
	}
 
	temps = setTimeout("calculDistance()",attente);
} 
 
// Fonction pour calculer la distance du slide et le sens
function calculDistance()
{
	// Distante totale parcourue par le slide
	var distance;
 
	conteneur = document.getElementById("conteneur");
	distance = conteneur.scrollHeight / tableauImage.length;
 
 
	// Affectation de la variable sens pour pouvoir le faire repartir si il arrive au bout
	if (conteneur.scrollTop + distance >=conteneur.scrollHeight)
	{
		sens = -1;
	}
	if (conteneur.scrollTop<distance)
	{
		sens = 1;
	}
 
	positionFin = conteneur.scrollTop + sens * distance;
	temps = setTimeout("defilementImage()", vitesse);
}
 
 
// Défilement des images
function defilementImage()
{
	conteneur.scrollTop = conteneur.scrollTop + sens * 2;	
 
	defilementTexte();
 
	// Si le slide arrive au bout, il repart dans l'autre sens
	if (sens == 1)
	{
		if (conteneur.scrollTop<positionFin)
		{
			temps = setTimeout("defilementImage()", vitesse);
 
		}	
		else
		{
			temps = setTimeout("calculDistance()",attente);
		}
 
	}
	// Le slide repart dans l'autre sens plus rapidement
	else
	{
		if (conteneur.scrollTop>positionFin)
		{
			temps = setTimeout("defilementImage()", vitesse);
		}	
		else
		{
			temps = setTimeout("calculDistance()", attente);
		}
 
	}
 
}
 
 
 
// Fonction défilement du texte
function defilementTexte()
{
	texte = document.getElementById("texte");
	tempsTexte = setTimeout("defilementTexte2()", vitesse);
	//console.log(texte);
 
}
 
function defilementTexte2()
{
	//texte.scrollRight = texte.scrollRight + 1 * 2;
	texte.style.left = texte.style.left + 100 + "px";
}

Le sliderJavascript.html

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
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<meta http-equiv="content-language" content="fr"/>
		<title>Ajax & jQuery - Exercice 10</title>
 
		<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<link rel="stylesheet" type="text/css" href="ajax.css"/>
	</head>
	<body id="exo10" onload="creationSlide()">
		<header>
			<div class="Control" id="home">
				<a class="Button" href="../">Retour à la liste des exercices</a>
			</div>
			<hgroup>
				<h1>Exercice 10 - Slider avance</h1>
				<h2>Animations</h2>
			</hgroup>
		</header>
		<section>
			<div class="conteneur" id="conteneur">
				<img src="image01.jpg" title="Premiere image"/>
				<div class="texte" id="texte">	
					texte
				</div>
			</div>
 
		</section>
		<script type="text/javascript" src="sliderJavascript.js"></script>
	</body>
</html>

Le style.css

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
@CHARSET UTF-8;
 
 
.conteneur, .cellule
{
	height: 331px;	
	width: 500px;   
	margin-left: auto;
	margin-right: auto;
}
 
/* CSS pour le conteneur */
.conteneur
{
	border: 10px #303030 solid;		/* Bordure du conteneur */
	overflow: hidden;
	-moz-border-radius: 10px;		/* Bordure arrondie */
	border-radius: 10px;
	-moz-box-shadow: 0 9px 15px #585858;		/* ombre sur le conteneur */
	-webkit-box-shadow: 0 9px 15px #585858;
}
 
 
/* CSS pour l'image */
.image
{
	height: 331px;
	width: 500px;	
}
 
/* CSS pour le texte */
.texte
{
	width: 300px;
	position: absolute;
	top: 500px;
	/*left: 500px;*/
	opacity: 0.75;
	background-color: white;
	color: black;
	font-size: 20px;
}

**RomainVALERI** · 02/12/2010, 11h31

Envoyé par jojojo84

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<title>Ajax & jQuery - Exercice 10</title>

Une page sur jQuery mais sans jQuery... si c'est pas le comble !

**jojojo84** · 02/12/2010, 11h44

C'est le thème global de nos exercices de la semaine; that's why

Malheureusement le problème se situe ailleurs

Div dynamique en JS

JavaScript

Discussions similaires

Partager

Partager