Un carrousel de produits avec Yahoo UI - 2/2

Après avoir construit l'interface de notre carroussel produits, nous allons maintenant l'animer, toujours en utilisant la librairie Yahoo UI.

Nous allons pour se faire construire 2 fonctions : la première pour faire défiler les produits (f_play) et la seconde pour arrêter le défilement (f_stop). Ces deux fonctions utilisent les méthodes setTimeout() et clearTimeout().

function f_play (p) {
 if(isNaN(p) == true) {
  var p = 0;
 }   
 var p = p % 6;
 tabView.set('activeIndex', p);
 p++;
 t = setTimeout("f_play("+p+")",2000);
  }
function f_stop (event) {
 //var cible = YAHOO.util.Event.getTarget(event, true)
 var p = this.id
 tabView.set('activeIndex', p);
 clearTimeout(t);
}

La durée d'affichage du produit en partie gauche est fixée à 2000 millisecondes soit 2 secondes.

L'appel de ces fonctions se fait par le code suivant :

YAHOO.util.Event.addListener(window, "load", f_play);
var ids = ["0", "1", "2", "3", "4", "5"];
YAHOO.util.Event.addListener(ids, "click", f_stop);

Vous pouvez voir ce carroussel en action sur la boutique de cosmétique Oanisha.

Pour toutes informations complémentaires sur la librairie yahoo et son utilisation, je vous invite à consulter le site Yahoo Developer Network.