Come promesso ecco la versione 2 dello slider in jQuery. Ovviamente essendo questa la versione 2 si tratta dell'evoluzione della versione 1.
Per i dettagli di base ossia come impostare i div e i css al fine di creare la struttura di uno slider vi rimando alla myslide Versione 1.
Caratteristiche:
- Auto avanzamento da sinistra verso destra e da destra verso sinistra ogni 3000 millisecondi.
- Quando il mouse entra nell'area della slide (.mouseenter) :
- la slide viene messa in pausa
- viene visualizzato un titolo
- viene visualizzata una descrizione
- vengono visualizzati i pulsanti di controllo
- quando il mouse lascia l'area (.mouseleave) la slide riprende da dove si era fermata, venono nascosti i pulsanti, il titolo e la descrizione.
- Controlli per avanzamento della successiva/precedente slide.
- Controlli per avanzamento rapido all'ultima slide o alla prima
- Pulsante per mettere in pausa/play
La slide è visibile qui : apri la demo myslidev2v
La slide è scaricabilie a qui : download myslidev2v
Troverete il file myslidev2.html, la cartella photos e la cartella images. aprite la pagina html con il notepad o meglio con notepad++ e provate a leggere il codice.
Dentro la pagina troverete alcuni piccoli commenti in inglese "maccheronico" e qui alcune descrizione generali.
Se vi servono ulteriori dettagli lasciate pure un commento, troverò sicuramente il tempo di rispondere.
Quindi aprite il codice e provate a leggere le seguenti note.
Subito dopo la dichiarazione di jQuery inizia lo script e nell'area delle global ci sono 4 variabili sotto il commento Options.
Quando la pagina è stata completamente verrà richiamata la funzione myautoslide() che si preoccuperà di far avanzare la slide ogni 3000ms. Il metodo utilizzato è quello di mandare in attesa la funzione stessa tramite la funziona javascript setTimeout() per poi chiamare la funzione myslideAnimate() e per ultimo richimaare se stessa entrando quindi in un loop infinito scandito da 3000ms.
La funzione myslideAnimate() prima di eseguire l'animazione della slide verifica se si è arrivata all'ultima o alla prima slide in modo da invertire il senso di marcia.
L'animazione viene eseguita utilizzando la funzione .animate() di jQuery passando a quest'ultima la nuova posizione del valore css left. I parametri vengono impostati attraverso variabili il cui valore cambia in base ai controlli effettuati ossia fine/inizio slide e senso di marcia della slide. Infatti la variabile cWayMath conterrà += o -= in modo da incrementare o diminuire la posizione di left e quindi di muovere la slide a sinistra o a destra. Mentre la variabile cGoTo contiene il senso di marcia della slide.
Un'esperto javascript e di jQuery avrà da giustamente da criticare il codice in quanto è per funzioni e non per oggetti ponendo un grosso limite alla slide. Se volessimo creare più slide all'interno della stessa pagina non potremmo farlo. Ma l'obiettivo principale era quello di far capire il meccanismo delle slide ossia di muovere a sinistra e a destra un div con dentro tanti div che sono le slide.
Sicuramente farò di tutto per creare la versione 3 della slide che avrà come obiettivo principale di diventare un plugin di jQuery ossia la naturale evoluzione di myslide.
