Your Ad Here

advanced code snippet search

Posted By

smartweb on 08/18/10


Tagged

newsticker


Versions (?)

Newsticker

 / Published in: jQuery
 

khaoula

Newsticker : affiche chaque élément d'une liste donnée les uns à la suite des autres avec un joli effet de transparence Et le défilement se met en pause lorsque l'on survol l'item.

Expand | Embed | Plain Text 
  1. $(function(){
  2.     jQuery.fn.newsTicker = jQuery.fn.newsticker = function(delay){
  3.         return this.each(function(){
  4.             if (this.nodeName.toLowerCase() != "ul") 
  5.                 return;
  6.             delay = delay || 4500; //délai du défilement
  7.             self = this;
  8.             self.items = jQuery("li", self);//tableau de li
  9.             self.items.not(":eq(0)").hide().end(); //masquer tous les items sauf la premiere
  10.             /*eq(0) : selectionne l'item dont l'index=0
  11.              end() : Mettre fin à l'operation de filtrage (not..)et retourner
  12.              l'élément self.items à son état antérieur.*/
  13.             self.currentitem = 0; //item courant
  14.             var doTick = function(){
  15.                 jQuery.newsticker(self);
  16.             }
  17.             setInterval(doTick, delay);
  18.         }).addClass("newsticker").hover(function(){
  19.  
  20.             this.pause = true; // Mettre en pause le défilement si on survol l'item
  21.         }, function(){
  22.  
  23.             this.pause = false;
  24.         });
  25.     }
  26.     jQuery.newsticker = function(el){
  27.  
  28.         if (el.pause) 
  29.             return;
  30.  
  31.         jQuery(el.items[el.currentitem]).fadeOut("slow", function(){
  32.             jQuery(this).hide();// masquer l'item courant
  33.             // afficher l'item suivant  
  34.  
  35.             el.currentitem = ++el.currentitem % (el.items.size()); // répéter de nouveau le défilement lorsqu' on a affiché tous les items
  36.             jQuery(el.items[el.currentitem]).fadeIn("slow");
  37.             jQuery(el.items[el.currentitem])
  38.  
  39.         });
  40.  
  41.     }
  42.  
  43.     $('#f3_flech_left').click(function(){
  44.  
  45.         var el = self;
  46.         el.pause = true; // Mettre en pause l'effet de défilement tant que le bouton  est cliqué
  47.         jQuery(el.items[el.currentitem]).fadeOut("slow", function(){
  48.             jQuery(this).hide();// Masquer l'item courant
  49.             // afficher l'item suivant
  50.             el.currentitem = ++el.currentitem % (el.items.size());
  51.             jQuery(el.items[el.currentitem]).fadeIn("slow");
  52.             jQuery(el.items[el.currentitem])
  53.  
  54.         });
  55.  
  56.     });
  57.  
  58.     //meme traitement si le bouton droite est cliqué 
  59.     $('#f3_flech_right').click(function(){
  60.         var el = self;
  61.  
  62.         el.pause = true;
  63.  
  64.         jQuery(el.items[el.currentitem]).fadeOut("slow", function(){
  65.             jQuery(this).hide();
  66.  
  67.             el.currentitem = ++el.currentitem % (el.items.size());
  68.  
  69.             jQuery(el.items[el.currentitem]).fadeIn("slow");
  70.             jQuery(el.items[el.currentitem])
  71.         });
  72.  
  73.  
  74.     });
  75.  
  76.  
  77.        jQuery("#news").newsTicker();
  78.  
  79. });

Report this snippet  

You need to login to post a comment.