Défilement de pages gauche à droite

Version imprimable

Alors voila, je possède 5 formulaires php différents. J'aimerais faire un script qui me permette de naviguer entre ces formulaires avec des flèches placés sur la droite et la gauche de l'écran.

Voici mon code qui ne marche pas :

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
var current_form = 0; //le formulaire courant donc au départ aucun
 
function suivant()
{
 current_form++; //on passe au formulaire suivant
if(current_form > 5) //si le formulaire suivant n'existe pas rester sur le dernier
 current_form = 5;
 
 if(current_form < $(".formulaire_recu").length) //si le formulaire a déja été charger
  afficher_formulaire(current_form); //afficher le formulaire
 else // on va charger le formulaire
 {
   $("#lesformulaire").append("<div class = 'formulaire_recu' ></div>"); //on ajoute le div qui va contenir le formulaire a venir
   $("#formulaireBoite button").attr("disabled", "disabled"); //on bloque les boutons le temps de chargement du formulaire
   $.ajax({
            url : "formulaire_"+current_form,
            type : "GET", //pas obligatoire car est la valeur par default
            data : {}, //pas obligatoire car rien a envoyer
            success : function(r){
                                $($(".formulaire_recu").get(current_form-1)).html(r); //on ajoute le nouveau formulaire (-1 a cause de l'inxation dans un array)
                                  $("#formulaireBoite button").removeAttr("disabled");//on libère les butons
                                      afficher_formulaire(current_form); //afficher le formulaire
                           }
  });
}
}
function precedent()
{
 current_form--; //on passe au formulaire precedent
if(current_form < 1) //si le formulaire precedent n'existe pas rester sur le premier
 current_form = 1;
 
  afficher_formulaire(current_form); //afficher le formulaire
 
}
 
function afficher_formulaire(index)
{
      $(".formulaire_recu").hide(); //on cache tt les formulaire
      $($(".formulaire_recu").get(current_form-1)).show(r); //on affiche le formulaire voulu (-1 a cause de l'inxation dans un array)
}
 
//et comme au depart il y a 0 formulaire on afficher le suivant qui sera le formulaire 1
 $(function(){
   suivant();
 });

Code:

1
2
3
4
5
6
7
8
9
10
11
 <div id = 'formulaireBoite' >
 <div id = 'lesformulaire' >
 
 </div>
 
 <center>
  <button onclick="javascript:precedent();" >Precedent</button>
  <button onclick="javascript:suivant();" >Suivant</button>
 <center/>
 
</div>

Cordialement.

Bonsoir

Sous réserve d'avoir bien compris :

Code:

1
2
3
4
5
6
7
8
9
<div id="formulaireBoite">
    <div id="lesformulaire">
 
    </div>
    <div style="text-align: center;">
        <button id="btnPrev">Precedent</button>
        <button id="btnNext">Suivant</button>
     </div>
</div>

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
var current_form = 0; // le formulaire courant donc au départ aucun
 
function suivant(){
    current_form++; // on passe au formulaire suivant
 
    if ( current_form > 5 ) // si le formulaire suivant n'existe pas rester sur le dernier
        current_form = 5;
 
    if ( current_form < $( ".formulaire_recu" ).length ){ // si le formulaire a déja été charger
        afficher_formulaire(current_form); //afficher le formulaire
    } else { // on va charger le formulaire
 
        $( "#lesformulaire" ).append( '<div class="formulaire_recu" ></div>' ); // on ajoute le div qui va contenir le formulaire a venir
        $( "#formulaireBoite button" ).prop( "disabled", true ); // on bloque les boutons le temps de chargement du formulaire
 
        /*
        $.ajax({
            url : "formulaire_"+current_form,
            type : "GET", //pas obligatoire car est la valeur par default
            data : {}, //pas obligatoire car rien a envoyer
            success : function( r ){
                $( $( ".formulaire_recu" ).get( current_form - 1 ) ).html( r ); //on ajoute le nouveau formulaire (-1 a cause de l'inxation dans un array)
                $( "#formulaireBoite button" ).prop( "disabled", false ); //on libère les butons
                afficher_formulaire( current_form ); //afficher le formulaire
            }
        });
        */
 
        $( $( ".formulaire_recu" ).get( current_form - 1 ) ).html( '<form><label>' + ( "Formulaire" + current_form ) + '</label><input type="text"></form>' ); //on ajoute le nouveau formulaire (-1 a cause de l'inxation dans un array)
        $( "#formulaireBoite button" ).prop( "disabled", false ); //on libère les butons
        afficher_formulaire( current_form ); //afficher le formulaire
 
    }
}
 
function precedent(){
    current_form--; //on passe au formulaire precedent
 
    if ( current_form < 1 ) //si le formulaire precedent n'existe pas rester sur le premier
        current_form = 1;
 
    afficher_formulaire( current_form ); //afficher le formulaire
}
 
function afficher_formulaire( index ){
    $( ".formulaire_recu" ).hide(); //on cache tt les formulaire
    $( $( ".formulaire_recu").get( index - 1 ) ).show(); //on affiche le formulaire voulu (-1 a cause de l'inxation dans un array)
}
 
$( "#btnPrev" ).on( "click", function(){
    precedent();
});
 
$( "#btnNext" ).on( "click", function(){
    suivant();
});
 
suivant();

19/02/2014, 08h44
SpaceFrog

Si j'ai bien compris
http://alvarotrigo.com/blog/fullpage...ling-websites/
http://www.alessandroferrini.it/lab/...roSlider/docs/
19/02/2014, 09h19
pouklet

Merci beaucoup !