Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:finir_slider_tempo

Finir Slider (tempo)

Si ce n'est pas encore fait, ajoutez les boutons "avant, après" (slider animation CSS 2D ou 3D).

(voir notes de TD, pour l'instant pas besoin de le faire pour le slider classique)

Temporisation

On va utiliser la fonction setInterval pour faire une action à intervalle régulier et clearInterval pour l'arrêter.

Ajouter le code suivant :

  function suivant(){
    console.log("ici le code passant au suivant");
  }
 
  var timer = setInterval(suivant,2000);

Testez : Vous devez voir le message s'afficher à intervalle régulier dans la console.

Remplacer le ”console.log” par le code permettant de passer au suivant.

Testez

Faire boucler le “slider” en ajoutant une clause ”else” au test traitant le cas du dernier élément. Dans ce cas, on utilisera le premier slide (écrire un sélecteur le trouvant).

Testez

Pour finir, on va interrompre le “timer” si l'utilisateur utilise les boutons (avant, après ou liens vers un slide).

On peut réaliser cela en ajoutant l'instruction : ”clearInterval(timer);” ou nécessaire.

Tester

Slider classique

Faire le même travail (bouton avant/après) pour le slider classique (rappel : celui de ce TP).

Lui ajouter aussi un “timer”.

cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/finir_slider_tempo.txt · Dernière modification: 2012/04/14 22:00 (modification externe)