Gularu.fr

• Tweet

Je viens de me tirer les cheveux sur 20 lignes de code donc je tiens à vous les filer. Cela ne doit pas être optimal (je connais les puristes qui vont crier au scandale). Disons que cela marche très bien tel quel !

C’est tout simple. Vous avez une liste à puce sur lequel vous voulez brancher un diaporama en passant d’une ligne à l’autre simplement.

Voici la liste à puce en HTML :

<ul id="actualitesUl">
	<li class="itemActualite actif"></li>
	<li class="itemActualite" style="display: none;"></li>
	<li class="itemActualite" style="display: none;"></li>
</ul>

Ici, il y en a trois, mais le code que j’ai fait fonctionne pour un nombre illimité. On va donc passer du premier li au suivant avec un effet simple de disparition et d’apparition grâce à la librairie js : Scriptaculous.
Pour ceux qui sont déjà perdus : révisez vos classiques.

Voici donc les 20 lignes de javascript qui m’ont données du fil à retordre (sachez que je n’avez pas codé en js depuis 6 mois !) :

// MAIN DE L'APPLICATION
new Event.observe(window, "load", function (evt) {
	leTimer = new PeriodicalExecuter(diaporamaChange, 10);
});
 
function diaporamaChange() {
	var tabLi = $("actualitesUl").childElements();
 
	$$(".actif").each(function(el) {
		el.hide('appear');
		el.removeClassName('actif');
		for(var i=0; i < tabLi.length; i++) if (el == tabLi[i]) if (i + 1 < tabLi.length ) tabLi[i+1].addClassName('actif'); else tabLi[0].addClassName('actif');
		$$(".actif").each(function(el2) { new Effect.toggle(el2, 'appear'); });
	});
}