Corsi on-line

Uno slideshow in 5 minuti con jQuery

Il vantaggio nell’utilizzare un framework Ajax come jQuery, sta nel fatto che grazie ad esso si hanno a disposizione tutte le librerie necessarie per essere immediatamente operativi, senza doversi giostrare in un mare di codice Javascript; facciamo un esempio: se volessimo creare uno slideshow per le nostre immagini partendo da zero probabilmente dovremmo spenderci sopra un pò di lavoro, utilizzando jQuery potremmo invece ottenere lo stesso risultato in appena 5 minuti, vediamo come:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(function(){
	$('.slideshow img:gt(0)').hide();
	setInterval(function(){$('.slideshow :first-child').fadeOut().next('img').fadeIn().end().appendTo('.slideshow');}, 2000);
});
</script>

<div class="slideshow">
<img src="immagini/a.png" />
<img src="immagini/b.png" />
<img src="immagini/c.png" />
......................
</div>

Naturalmente sarà molto più comodo utilizzare lo script andando a recuperare le informazioni relative alle immagini da visualizzare da una base di dati o da un docuemento XML; ricordatevi naturalmente di aggiungere le necessarie informazioni di stile CSS da associare all’id “slideshow”.

Post correlati
  • Questo è con le immagini o per div, mi serve per file xml.Come faccio a fare un slide che passi da una sezione all’altra del file xml sia in avnati (successivo) che indietro (precednete).Sai dirmi coem fare 

  • Clear95

    Al posto che fadeOut()/fadeIn() usi slideOut()/slideIn() oppure la funzione animate() e invece per il div al posto del tag img usi il div.. semplice semplice

I più letti del mese
Tematiche