DevZone – Zone de développement web

Citons l’auteur de ce plugin jQuery (st3ph de mushtitude.com) :

jQuery – easyTicker … permet de créer simplement un (ou plusieurs) « newsticker »  à partir d’une liste.

Il permet donc de réaliser effet de transition entre plusieurs éléments d’un même bloc que leurs contenus soient du texte ou des images.

Un exemple avec du texte :

<ul class="easyticker">
    <li style="display:block;">
        <strong>Premier élément</strong>
    </li>
    <li>
        <strong>Second élément</strong>
    </li>
    <li>
        <strong>Troisième élément</strong>
    </li>
</ul>

Et pour l’activer :

$(document).ready(function() {
	$('.easyticker').easyticker({
		speed: 'fast', // Optional: default 'slow'
		dureeAffichage: 2000 // Optional: default 5000
	});
});

Malheureusement, c’est à vous de créer le CSS qui va avec :

ul.easyticker {height:150px;overflow:hidden;position:relative;}
ul.easyticker li {display:none;left:0;position:absolute;top:0;}

Autre défaut, c’est à vous de faire en sorte que le premier élément soit visible.

Vous pouvez cependant constater que la vitesse de transition et le temps d’affichage sont configurables.

Petite précision bien utile : en plus de jQuery (logique non ?), il vous faudra le plugin jquery.timers

Lien :

• jQuery – easyTicker