Je débute en Javascript et Jquery, diaporama avec miniature
Bonjour à toutes et à tous et merci de m'accueillir au sein de votre communauté.
Je débute la programmation en javascript et Jquery et je désire développer un script très simple que vous connaissez tous et que vous savez probablement tous développer.
Je désire créer un diaporama défilant avec possibilité via bouton de sauter directement à un slide, cet effet est visible sur le site matériel.net par exemple.
Je veux le développer moi même afin de comprendre la mécanique et surtout j'ai compris qu'apprendre avec un objectif est plus efficace (enfin pour moi)
J'ai déjà commencé à écrire un code en m'aidant d'un livre mais je n'arrive pas à finaliser ce que je veux.
Voici mon 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
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<style type = "text/css">
#contenu1 {
width: 300px;
height: 200px;
font-size: 200%;
background-color: yellow;
position: absolute;
left: 300px;
top: 100px;
}
#contenu2 {
width: 300px;
height: 200px;
font-size: 200%;
background-color: yellow;
position: absolute;
left: 300px;
top: 100px;
}
h2 {
width: 10em;
border: 5px double black;
background-color: lightgray;
text-align: center;
font-family: sans-serif
}
</style>
<script type = "text/javascript"
src = "jquery-1.3.2.min.js"></script>
<script type = "text/javascript">
//<![CDATA[
function init(){
$("#contenu1").hide();
$("#contenu2").hide();
$("#bouton1").click(function_fadeIn);
$("#bouton2").click(function_fadeIn2);
} // fin de init
function function_fadeIn(){
$("#contenu1").fadeIn("slow"); // on fade in
$("#contenu1").fadeOut("slow",function_fadeIn2); // on fade out
} // fin de fadeIn
function function_fadeIn2(){
$("#contenu2").fadeIn("slow"); // on fade in
$("#contenu2").fadeOut("slow",function_fadeIn); // on fade out
} // fin de fadeIn
$(init); // On initialise les fonction et on masque les DIV
$(function_fadeIn);// lancement de la premiere fonction
//]]>
</script>
<title>hideShow.html</title>
</head>
<body>
<h2 id = "bouton1">bouton 1</h2>
<h2 id = "bouton2">bouton 2</h2>
<p id = "contenu1">
Contenu 1
</p>
<p id = "contenu2">
Contenu 2
</p>
</body>
</html> |
Ma problématique est que je ne sais pas comment arrêter l'exécution de la fonction_fadeIn si je clique sur le bouton 2 qui lance la fonction fadeIn2.
Je suis conscient que mon code est tout sauf optimisé, dons si vous avez la possibilité de m'aider voir de me donner un code qui ferait ce que je demande tout en étant simple car le but est que je le comprenne ça serait sympa.
Par avance merci
