Je débute en Javascript et Jquery, diaporama avec miniature

iris2007 · 12/11/2011, 10h45

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 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
<!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

danielhagnoul · 12/11/2011, 21h59

Bonsoir

Citation:

J'ai déjà commencé à écrire un code en m'aidant d'un livre [...]

J'ignore si le livre est bon, mais il est sûrement vieux !

Je vous conseille de lire la FAQ jQuery et quelques bons tutoriels.

Mais même tout cela date un peu, jQuery évolue très vite, nous en sommes à la version 1.7, seule la documentation officielle en anglais est toujours "à jour" : l'API jQuery.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>HideShow</title>
	<style>
		#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.btn {
			width: 10em;
			border: 5px double black;
			background-color: lightgray;
			text-align: center;
			font-family: sans-serif;
			cursor:pointer;
		}
	</style>
</head>
<body>	
	<div class="conteneur">
 
		<h2 id="bouton1" class="btn">bouton 1</h2>
		<h2 id="bouton2" class="btn">bouton 2</h2>
		<p id="contenu1">
			Contenu 1
		</p>
		<p id="contenu2">
			Contenu 2
		</p>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.min.js"></script>
	<script>
		"use strict";
 
		$(function(){
			$("#contenu1, #contenu2").hide();
 
			var boolFade = false; // booléen pour poser la condition "passe la main"
 
			function function_fadeIn1(){
				$("#contenu1").fadeIn(250, function(){ // show
					$(this).fadeOut(250, function(){ // hide
						if (boolFade){
							function_fadeIn2(); // passe la main
						}
					});
				});
			}
 
			function function_fadeIn2(){
				$("#contenu2").fadeIn(250, function(){ // show
					$(this).fadeOut(250, function(){ // hide
						if (boolFade){
							function_fadeIn1(); // passe la main
						}
					});
				});
			};
 
			$("#bouton1").click(function(){
				boolFade = true;
 
				function_fadeIn1();
 
				setTimeout(function(){ // stop dans 4s
					boolFade = false;
				}, 4000); // 4000 milliseconds = 4s
			});
 
			$("#bouton2").click(function(){
				boolFade = true;
 
				function_fadeIn2();
 
				setTimeout(function(){
					boolFade = false;
				}, 4000);
			});
		});
	</script>
</body>  
</html>

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