Realizziamo uno slider in JavaScript con le nostre mani. Slider immagine personalizzato con jQuery

Se devi aggiungere al tuo sito uno slider di immagini jQuery di alta qualità, in questo articolo troverai una descrizione dei plugin necessari. Anche se jQuery ha reso molto più facile lavorare con JavaScript, abbiamo comunque bisogno di plugin per accelerare il processo di progettazione web.

Possiamo apportare modifiche ad alcuni di questi plugin e creare nuovi slider che sono molto più adatti alle esigenze del nostro sito.

Per altri dispositivi di scorrimento, aggiungi semplicemente titoli, immagini e seleziona gli effetti di transizione delle diapositive forniti con il dispositivo di scorrimento. Tutti questi plugin sono dotati di documentazione dettagliata, quindi è facile aggiungere nuovi effetti o funzionalità. Puoi persino modificare i trigger basati su eventi se sei un programmatore jQuery esperto.

Le tendenze recenti come il design reattivo sono molto importanti per i progetti Web, sia che tu stia implementando un plug-in o uno script. Tutti questi elementi rendono ciascuno di questi plugin molto flessibile. Tutto ciò che è uscito nel 2014 è incluso in questo elenco.

Slider immagine jQuery

Dispositivo di scorrimento reattivo Jssor

Di recente mi sono imbattuto in questo dispositivo di scorrimento jQuery funzionale e sono stato in grado di vedere di persona che fa il suo lavoro molto bene. Contiene possibilità illimitate che possono essere estese con il codice open source dello slider:

• Design adattivo;
• Oltre 15 opzioni di personalizzazione;
• Più di 15 effetti di modifica dell'immagine;
• Galleria di immagini, caroselli, supporto per le dimensioni dello schermo intero;
• Ruota banner verticale, elenco diapositive;
• Supporto video.

Dimostrazione | Scarica

PgwSlider - slider reattivo basato su jQuery / Zepto

L'unico scopo di questo plugin è mostrare diapositive di immagini. È molto compatto, poiché i file jQuery sono solo 2,5 KB, il che lo rende davvero veloce da caricare:

• Layout reattivo;
• ottimizzazione SEO;
• Supporto per diversi browser;
• Semplici transizioni di immagini;
• La dimensione dell'archivio è di soli 2,5 KB.

Dimostrazione | Scarica

jQuery Vertical News Slider

Uno slider jQuery flessibile e utile progettato per le risorse di notizie con un elenco di pubblicazioni sul lato sinistro e un'immagine visualizzata sulla destra:

• Design adattivo;
• Notizie di commutazione di colonna verticale;
• Intestazioni estese.

Dimostrazione | Scarica

Dispositivo di scorrimento a sbalzo

Questo slider non contiene jQuery , ma vorrei presentarlo in quanto è molto compatto e consente di ridurre notevolmente i tempi di caricamento della pagina. Fammi sapere se ti piace:

• Layout reattivo;
• Design semplice;
• Varie opzioni per cambiare le diapositive;
• Codice JavaScript minimo;
• La dimensione è di soli 3Kb.

Dimostrazione | Scarica

Galleria Polaroid in stile piatto

Con un layout flessibile e un bel design, la galleria nello stile dei documenti sparsi sul tavolo dovrebbe interessare molti di voi. Più adatto per tablet e display di grandi dimensioni:

• Dispositivo di scorrimento reattivo;
• Design piatto;
• Cambio diapositiva casuale;
• Accesso completo al codice sorgente.

Dimostrazione | Scarica

A-Slider

Dimostrazione | Scarica

HiSlider - Slider di immagini HTML5, jQuery e WordPress

HiSlider ha introdotto un nuovo plugin di scorrimento jQuery gratuito con il quale puoi creare una varietà di gallerie di immagini con fantastiche transizioni:

• Dispositivo di scorrimento reattivo;
• Non richiede conoscenze di programmazione;
• Diversi modelli e skin fantastici;
• Bellissimi effetti di transizione;
• Supporto per diverse piattaforme;
• Compatibile con WordPress, Joomla, Drupal;
• Possibilità di visualizzare contenuti di diverso tipo: immagini, video YouTube e video Vimeo;
• Impostazione flessibile;
• Funzionalità aggiuntive utili;
• Quantità illimitata di contenuti visualizzati.

Demo | Scarica

wow cursore

WOW Slider è uno slider di immagini jQuery reattivo con incredibili effetti visivi ( domino, ruota, sfoca, capovolgi e lampeggia, riquadro a comparsa, persiane) e modelli professionali.

WOW Slider viene fornito con una procedura guidata di installazione che ti consente di creare fantastici cursori in pochi secondi senza dover capire il codice e modificare le immagini. Sono inoltre disponibili per il download le versioni del plugin per Joomla e WordPress:

• Completamente reattivo;
• Supporto per tutti i browser e tutti i tipi di dispositivi;
• Supporto per dispositivi touch;
• Facile installazione su WordPress;
• Flessibilità nella personalizzazione;
• Ottimizzato per la SEO.

Demo | Scarica

Nivo Slider - plugin jQuery gratuito

Nivo Slider è conosciuto in tutto il mondo come lo slider di immagini più bello e facile da usare. Il plug-in Nivo Slider è gratuito e rilasciato con licenza MIT:

• Richiede jQuery 1.7 e versioni successive;
• Bellissimi effetti di transizione;
• Semplice e flessibile da configurare;
• Compatto e adattivo;
• open source;
• Potente e semplice;
• Diversi modelli diversi;
• Ritaglio automatico dell'immagine.

Demo | Scarica

Slider jQuery semplice con documentazione tecnica

L'idea è stata ispirata dagli slider di Apple, in cui diversi piccoli elementi possono volare fuori con vari effetti di animazione. Gli sviluppatori hanno cercato di implementare questo concetto, tenendo conto dei requisiti minimi, per creare un design semplice di un negozio online, in cui gli elementi "volanti" rappresentano varie categorie:

• Layout reattivo;
• Design minimalista;
• Vari effetti di abbandono e transizione diapositiva.

Demo | Scarica

Dispositivo di scorrimento dell'immagine jQuery a grandezza naturale

Uno slider molto semplice che occupa il 100% della larghezza della pagina e si adatta alle dimensioni dello schermo dei dispositivi mobili. Funziona con transizioni CSS e immagini "impilate" con ancore. L'ancora può essere sostituita o rimossa se non si desidera collegare l'immagine.

Quando impostato, il dispositivo di scorrimento si espande al 100% della larghezza dello schermo. Inoltre può ridurre automaticamente le dimensioni delle immagini delle diapositive:

• Dispositivo di scorrimento jQuery reattivo
• dimensione piena;
• Design minimalista.

Demo | Scarica

Cursore contenuto elastico + indennità

Il dispositivo di scorrimento del contenuto elastico regola automaticamente la larghezza e l'altezza in base alle dimensioni dell'elemento padre. Questo è un semplice dispositivo di scorrimento jQuery. È costituito da un'area diapositiva in alto e da una barra delle schede di navigazione in basso. Il dispositivo di scorrimento regola la larghezza e l'altezza in base alle dimensioni del contenitore principale.

Se visualizzate su schermi diagonalmente piccoli, le schede di navigazione si trasformano in piccole icone:

• Design adattivo;
• Scorrimento con clic del mouse.

Demo | Scarica

Dispositivo di scorrimento dello stack 3D gratuito

Uno slider sperimentale che scorre le immagini in 3D. Due pile assomigliano a pile di carta, da cui, durante lo scorrimento, le immagini vengono visualizzate al centro del dispositivo di scorrimento:

• Design adattivo;
• Capovolgi - transizione;
• Effetti 3D.

Demo | Scarica

Slider a fessura a schermo intero basato su jQuery e CSS3 + manuale

Nel tutorial imparerai come creare uno slider con una svolta: l'idea è di "tagliare" e visualizzare la diapositiva corrente in questo modo, nel momento in cui apri l'immagine successiva o precedente. Utilizzando jQuery e l'animazione CSS, possiamo creare effetti di transizione unici:

• Design adattivo;
• Transizione divisa;
• Dispositivo di scorrimento a schermo intero.

Demo | Scarica

Unislider: uno slider jQuery molto piccolo

Niente campanelli e fischietti inutili e markup, la dimensione è inferiore a 3 KB. Usa qualsiasi codice HTML per le tue diapositive, estendilo con CSS. Tutto ciò che riguarda Unslider è ospitato su GitHub:

• Supporto per vari browser;
• Supporto tastiera;
• Regolazione altezza;
• Design adattivo;
• Supporto per l'input tattile.

Dimostrazione | Scarica

Diapositive reattive minime

Plugin semplice e compatto ( la dimensione è solo 1 Kb) che crea un dispositivo di scorrimento reattivo utilizzando elementi all'interno di un contenitore. ResponsiveSLides.js funziona con un gran numero di browser, incluse tutte le versioni di IE da IE6 in su:

• Completamente reattivo;
• Dimensione 1 KB;
• Transizioni CSS3 che possono essere attivate tramite JavaScript;
• Markup semplice utilizzando un elenco puntato;
• Possibilità di personalizzare gli effetti di transizione e la durata della visualizzazione di una diapositiva;
• Supporta la possibilità di creare più presentazioni;
• Scorrimento automatico e manuale.

Demo | Scarica

Fotocamera - slider jQuery gratuito

Camera è un plugin con molti effetti di transizione, layout adattivo. Facile da configurare, supportato da dispositivi mobili:

• Design completamente reattivo;
• firme;
• Possibilità di aggiungere video;
• 33 diversi colori di icone.

Demo | Scarica

SlidesJS, Plugin jQuery reattivo

SlidesJS è un plug-in reattivo per jQuery (1.7.1 e versioni successive) con supporto per dispositivi touch e transizioni CSS3. Sperimentaci, prova alcuni esempi già pronti che ti aiuteranno a capire come aggiungere SlidesJS al tuo progetto:

• Design adattivo;
• transizioni CSS3;
• Supporto per dispositivi touch;
• Facile da configurare.

Dimostrazione | Scarica

Dispositivo di scorrimento Jquery BX

Questo è uno slider jQuery reattivo gratuito:

• Completamente reattivo: si adatta a qualsiasi dispositivo;
• Cambio diapositiva orizzontale e verticale;
• Le diapositive possono contenere immagini, video o contenuto HTML;
• Supporto esteso per dispositivi touch;
• Utilizzo delle transizioni CSS per l'animazione delle diapositive ( accelerazione hardware);
• API di callback e metodi completamente pubblici
• File di piccole dimensioni;
• Facile da implementare.

Demo | Scarica

Cursore flessibile 2

Il miglior dispositivo di scorrimento reattivo. La nuova versione è stata finalizzata in modo da aumentare la velocità di lavoro, la compattezza.

Dimostrazione | Scarica

Galleria - Galleria fotografica JavaScript reattiva

Galleria è utilizzata da milioni di siti Web per creare gallerie di immagini di alta qualità. Il numero di recensioni positive sul suo lavoro non fa che aumentare:

• Completamente gratis;
• Modalità di visualizzazione a schermo intero;
• 100% adattivo;
• Nessuna esperienza di programmazione richiesta;
• Supporto per iPhone, iPad e altri dispositivi touch;
• Flickr, Vimeo, YouTube e altro;
• Diversi temi.

Dimostrazione | Scarica

Blueberry - Slider di immagini jQuery semplice e reattivo

Ti presento uno slider di immagini jQuery scritto appositamente per il web design reattivo. Blueberry è un plug-in sperimentale di scorrimento delle immagini open source che è stato scritto specificamente per funzionare con modelli reattivi:

• Design minimale;
• Layout reattivo;
• Presentazioni.

Dimostrazione | Scarica

jQuery Braccio di Ferro 2.1

Vengono utilizzati gli elementi standard della prima versione del programma: lo slider si nasconde a sinistra e si apre a destra. Gli stessi elementi di navigazione e didascalie che compaiono al passaggio del mouse:

• Design adattivo;
• Supporto per le firme;
• Modalità presentazione.

Dimostrazione | Scarica

1. Eccellente presentazione di jQuery

Grande presentazione spettacolare utilizzando la tecnologia jQuery.

2. Plugin jQuery "Scale Carousel"

Presentazione ingrandibile utilizzando jQuery. Puoi impostare le dimensioni per la presentazione più adatta a te.

3. Plugin jQuery "slideJS"

Slider immagine con descrizione testuale.

4. Plugin "JSliderNews"

5. Dispositivo di scorrimento jQuery CSS3

Quando passi con il mouse sulle frecce di navigazione, viene visualizzata una miniatura rotonda della diapositiva successiva.

6. Piuttosto jQuery Slider "Ciclo di presentazione".

Dispositivo di scorrimento jQuery con indicatore di caricamento dell'immagine. È previsto il cambio diapositiva automatico.

7. Plugin jQuery Parallax Slider

Dispositivo di scorrimento con effetto di sfondo 3D. Il clou di questo cursore è il movimento dello sfondo, che consiste in diversi livelli, ognuno dei quali scorre a una velocità diversa. Il risultato è un'imitazione di un effetto volumetrico. Sembra molto bello, puoi vederlo di persona. L'effetto viene visualizzato in modo più fluido in browser quali: Opera, Google Chrome, IE.

8. Dispositivo di scorrimento jQuery fresco e leggero "bxSlider 3.0"

Nella pagina demo, nella sezione "esempi", puoi trovare i link a tutti i possibili utilizzi di questo plugin.

9. Plugin jQuery Image Slider "slideJS"

L'elegante slider jQuery sarà sicuramente in grado di decorare il tuo progetto.

10. Plugin di presentazione jQuery "Easy Slides" v1.1

Un plugin per slideshow jQuery facile da usare.

11. Plugin "Diapositive jQuery"

Plugin jQuery leggero in vari design. È previsto il cambio diapositiva automatico.

12. Galleria CSS jQuery con transizione automatica delle diapositive

Se il visitatore non clicca sulle frecce avanti o indietro entro un certo tempo, la galleria inizierà a scorrere automaticamente.

13. jQuery Nivo Slider

Plugin leggero di qualità molto professionale con codice valido. Ci sono molti diversi effetti di transizione della diapositiva.

14. Dispositivo di scorrimento mobile jQuery

Fresco cursore. Dispositivo di scorrimento jQuery con diversi effetti di transizione dell'immagine.

15. Plugin jQuery Slider²

Slider leggero con cambio diapositiva automatico.

16. Dispositivo di scorrimento javascript fresco

Slider con cambio immagine automatico.

Plugin per l'implementazione di presentazioni con cambio diapositive automatico. È possibile controllare la visualizzazione utilizzando le miniature delle immagini.

jQuery cursore immagine CSS utilizzando il plug-in NivoSlider.

19. Dispositivo di scorrimento jQuery "jShowOff".

Plugin per la rotazione dei contenuti. Tre casi d'uso: nessuna navigazione (con cambio automatico del formato della presentazione), navigazione tramite pulsanti, navigazione in miniatura dell'immagine.

20. Plugin Portfolio Effetto Otturatore

Plugin jQuery fresco per la progettazione del portfolio del fotografo. La galleria ha un effetto interessante di cambiare le immagini. Le foto si susseguono con un effetto simile al funzionamento di un otturatore dell'obiettivo.

21. Slider CSS javascript leggero "TinySlider 2"

Implementazione del dispositivo di scorrimento delle immagini tramite javascript e CSS.

22. Fantastico dispositivo di scorrimento "Tinycircleslider"

Elegante cursore rotondo. La transizione tra le immagini avviene trascinando il cursore a forma di cerchio rosso attorno alla circonferenza. Si adatterà perfettamente al tuo sito se utilizzi elementi rotondi nel tuo design.

23. Dispositivo di scorrimento dell'immagine jQuery

Kit di scorrimento leggero. Lo slider è presentato in diverse versioni: verticale e orizzontale. Sono inoltre implementati vari tipi di navigazione tra le immagini: utilizzando i pulsanti "Avanti" e "Indietro", utilizzando la rotellina del mouse, utilizzando il clic del mouse sulla diapositiva.

24. Galleria di miniature del kit di scorrimento

Galleria dei kit di scorrimento. Le miniature vengono fatte scorrere sia verticalmente che orizzontalmente. Il passaggio tra le immagini avviene tramite: rotellina del mouse, clic del mouse o passando sopra una miniatura.

25. Dispositivo di scorrimento del contenuto jQuery "Kit di scorrimento"

jQuery dispositivo di scorrimento del contenuto verticale e orizzontale.

26. Presentazione del kit di scorrimento jQuery

Presentazione con cambio diapositiva automatico.

27. Slider CSS3 JavaScript professionale leggero

Slider pulito jQuery e CSS3 creato nel 2011.

jQuery presentazione in miniatura.

29. Semplice presentazione jQuery

Presentazione con pulsanti di navigazione.

30. Fantastica presentazione di jQuery Skitter

Plugin jQuery "Skitter" per creare incredibili presentazioni. Il plugin supporta 22 (!) tipi di diversi effetti di animazione quando si cambiano le immagini. Può funzionare con due opzioni di navigazione delle diapositive: utilizzando i numeri delle diapositive e utilizzando le miniature. Assicurati di dare un'occhiata alla demo, una scoperta di altissima qualità. Tecnologie utilizzate: CSS, HTML, jQuery, PHP.

31. Presentazione imbarazzante

Presentazione funzionale. Le diapositive possono essere: immagini semplici, immagini con didascalie, immagini con suggerimenti, clip video. Puoi utilizzare le frecce, i collegamenti ai numeri delle diapositive e i tasti destra/sinistra sulla tastiera per navigare. La presentazione è realizzata in diverse versioni: con miniature e senza di esse. Per visualizzare tutte le opzioni, segui i link Demo #1 - Demo #6 che si trovano nella parte superiore della pagina demo.

Un design molto originale dello slider dell'immagine, che ricorda un fan. Transizione animata della diapositiva. La navigazione tra le immagini avviene tramite le frecce. C'è anche un cambio automatico che può essere attivato e disattivato tramite il pulsante Play/Pausa che si trova in alto.

Slider animato jQuery. Le immagini di sfondo vengono ridimensionate automaticamente quando la finestra del browser viene ridimensionata. Per ogni immagine viene visualizzato un blocco con una descrizione.

34. Dispositivo di scorrimento "Flux Slider" su jQuery e CSS3

Nuovo cursore jQuery. Diversi fantastici effetti animati quando si cambiano le diapositive.

35. Plugin jQuery "jSwitch"

Galleria jQuery animata.

Facile presentazione jQuery con cambio diapositiva automatico.

37. Nuova versione del plugin "SlideDeck 1.2.2"

Dispositivo di scorrimento dei contenuti professionale. Sono disponibili opzioni con cambio diapositiva automatico, nonché un'opzione che utilizza la rotellina del mouse per spostarsi tra le diapositive.

38. Dispositivo di scorrimento sudo jQuery

Dispositivo di scorrimento dell'immagine jQuery leggero. Ci sono molte opzioni per l'implementazione: modifica orizzontale e verticale delle immagini, con collegamenti al numero della diapositiva e senza di esse, con e senza didascalie dell'immagine, vari effetti di modifica dell'immagine. C'è una funzione di cambio diapositiva automatica. I collegamenti a tutti gli esempi di implementazione sono disponibili nella pagina demo.

39. Presentazione jQuery CSS3

La presentazione con miniature supporta la modalità di transizione automatica delle diapositive.

40. Dispositivo di scorrimento del flusso jQuery

Dispositivo di scorrimento con molti effetti di modifica dell'immagine.

41. Semplice cursore jQuery

Elegante cursore di immagine jQuery.

42. Presentazione jQuery "Craftyslide".

43. Presentazione jQuery a schermo intero

jQuery presentazione a schermo intero HTML5 con audio.

Una semplice presentazione jQuery.

Il tempo non si ferma e con esso il progresso. Ciò ha interessato anche Internet. Puoi già notare come sta cambiando l'aspetto dei siti, in particolare il design adattivo è molto popolare. E di conseguenza, molti nuovi slider jquery reattivi, gallerie, caroselli o plugin simili.
1. Dispositivo di scorrimento dei post orizzontali reattivo

Giostra orizzontale reattiva con istruzioni di installazione dettagliate. È realizzato in uno stile semplice, ma puoi modellarlo da solo.

2. Dispositivo di scorrimento su Glide.js

Questo dispositivo di scorrimento è adatto a qualsiasi sito. Utilizza Glide.js open source. I colori dei cursori possono essere facilmente modificati.

3. Presentazione del contenuto inclinato

Dispositivo di scorrimento dei contenuti reattivo. Il clou di questo dispositivo di scorrimento è l'effetto 3D delle immagini, oltre a varie animazioni di aspetto casuale.

4. Dispositivo di scorrimento che utilizza la tela HTML5

Slider molto bello e impressionante con particelle interattive. Realizzato con tela HTML5

5. Dispositivo di scorrimento per la trasformazione dell'immagine

Slider con effetto morphing (trasformazione uniforme da un oggetto all'altro). In questo esempio, lo slider è adatto per il portfolio di uno sviluppatore web o di uno studio web sotto forma di portfolio.

6. Dispositivo di scorrimento circolare

Dispositivo di scorrimento a forma di cerchio con l'effetto di capovolgere l'immagine.

7. Dispositivo di scorrimento dello sfondo sfocato

Dispositivo di scorrimento reattivo con commutazione e sfocatura dello sfondo.

8. Cursore di moda reattivo

Dispositivo di scorrimento del sito Web semplice, leggero e reattivo.

9. Slicebox - slider per immagini 3D jQuery(AGGIORNATO)

Versione aggiornata dello slider Slicebox con correzioni e nuove funzionalità.

10.Griglia di immagini reattive animate gratuite

Un plug-in jQuery per la creazione di una griglia di immagini flessibile che cambierà gli scatti utilizzando animazioni e tempi diversi. Questo può avere un bell'aspetto come sfondo o elemento decorativo sul sito, poiché possiamo impostare l'aspetto selettivo di nuove immagini e le loro transizioni. Il plugin è realizzato in diverse versioni.

11.Slitta flessibile

Plugin gratuito universale per il tuo sito web. Questo plugin è disponibile in più opzioni di scorrimento e carosello.

12. Cornice per foto

Fotoramaè un plugin universale. Ha molte impostazioni, tutto funziona in modo semplice e veloce, è possibile visualizzare le diapositive a schermo intero. Lo slider può essere utilizzato sia a dimensione fissa che adattivo, con e senza miniature, con e senza scorrimento circolare e molto altro.

PSHo messo più volte lo slider e penso che sia uno dei migliori

13. Slider della galleria delle miniature 3D gratuito e reattivo.

Galleria di slider sperimentali 3DPanelLayout con griglia e interessanti effetti di animazione.

14. Dispositivo di scorrimento su css3

Dispositivo di scorrimento reattivo realizzato utilizzando CSS3 con aspetto uniforme del contenuto e animazione leggera.

15. Dispositivo di scorrimento WOW

Dispositivo di scorrimento WOWè uno slider di immagini con effetti visivi sorprendenti.

17. Elastico

Dispositivo di scorrimento elastico con reattività completa e miniature delle diapositive.

18. Fessura

Questo è un dispositivo di scorrimento reattivo a schermo intero che utilizza l'animazione CSS3. Il cursore è realizzato in due versioni. L'animazione è fatta in modo abbastanza insolito e bello.

19. Galleria fotografica reattiva plus

Semplice galleria di scorrimento gratuita con caricamento di immagini.

20. Dispositivo di scorrimento reattivo per WordPress

Slider gratuito reattivo per WP.

21. Dispositivo di scorrimento del contenuto di parallasse

Slider con effetto di parallasse e controllo di ogni elemento con CSS3.

22. Slider con rilegatura musicale

Dispositivo di scorrimento che utilizza JPlayer open source. Questo dispositivo di scorrimento assomiglia a una presentazione con musica.

23. Dispositivo di scorrimento con jmpress.js

Lo slider responsive si basa su jmpress.js e consentirà quindi di applicare alle diapositive alcuni interessanti effetti 3D.

24. Presentazione rapida al passaggio del mouse

Presentazione con cambio diapositivo rapido. Le diapositive si attivano al passaggio del mouse.

25. Fisarmonica di immagini con CSS3

Fisarmonica di immagini con css3.

26. Un plug-in Galleria ottimizzato per il tocco

Questa è una galleria reattiva ottimizzata per i dispositivi touch.

27. Galleria 3D

Galleria della parete 3D- creato per il browser Safari, dove sarà visibile l'effetto 3D. Se visualizzato su un browser diverso, la funzionalità andrà bene, ma l'effetto 3D non sarà visibile.

28. Dispositivo di scorrimento con impaginazione

Dispositivo di scorrimento dell'impaginazione reattivo con il dispositivo di scorrimento dell'interfaccia utente jQuery. l'idea è di utilizzare un semplice concetto di navigazione. È possibile riavvolgere tutte le immagini o passare da una diapositiva all'altra.

29.Montaggio di immagini con jQuery

Disposizione automatica delle immagini in base alla larghezza dello schermo. Una cosa molto utile quando si sviluppa un sito portfolio.

30. Galleria 3D

Un semplice cursore circolare 3D in css3 e jQuery.

31. Modalità a schermo intero con effetto 3D su css3 e jQuery

Dispositivo di scorrimento con la possibilità di visualizzare le immagini a schermo intero con una bella transizione.

Uno dei maggiori problemi che la civiltà occidentale deve affrontare in questo momento è come visualizzare molti contenuti in un piccolo spazio.

Una soluzione efficace consiste nel disporre i contenuti in blocchi sequenziali utilizzando ciò che è noto nel settore ( e nella comunità online) chiamato Content Slider. Potresti non averne sentito parlare, ma sono pronto a scommettere che devi averlo sicuramente visto.

Per rinfrescarti la memoria e darti un'idea di cosa creeremo, di seguito è riportato esempio di scorrimento dei contenuti:

In questo articolo, ti mostrerò come creare il tuo bellissimo dispositivo di scorrimento dei contenuti molto simile a questo. Oltre alla semplice creazione di un dispositivo di scorrimento del contenuto, imparerai molto su come HTML, CSS e JavaScript lavorano insieme per creare un elemento simile. In generale, molte cose nuove ti aspettano, quindi iniziamo.

Panoramica di come funziona

Prima di tuffarci a capofitto nell'HTML , CSS e JavaScript che saranno necessari per far funzionare tutto, facciamo un piccolo passo indietro e pensiamo agli elementi che compongono il nostro dispositivo di scorrimento dei contenuti.

Innanzitutto, abbiamo il contenuto che vogliamo inserire nel dispositivo di scorrimento:

Il contenuto può essere qualsiasi cosa. Possono essere immagini, contenuto HTML standard, una combinazione di diversi tipi di contenuto e così via. Non importa. Se il nostro contenuto può essere racchiuso in elementi DIV, stiamo bene. Devi solo assicurarti che ogni singolo blocco di contenuto abbia la stessa larghezza e altezza.

Quando visualizzi un dispositivo di scorrimento, vedi solo un blocco di contenuto alla volta. Se non vengono eseguiti passaggi aggiuntivi, il contenuto visualizzato contemporaneamente nelle sue dimensioni originali può trasformare il dispositivo di scorrimento in qualcosa di molto visivamente sgradevole.

Risolveremo questo problema in due passaggi. Innanzitutto, avvolgeremo il contenuto in un contenitore delle stesse dimensioni di uno dei blocchi di contenuto:

Dopo aver avvolto il contenuto nel contenitore, tagliamo tutti gli elementi attorno al blocco di contenuto per garantire che venga visualizzato un solo blocco alla volta:

Il passaggio successivo consiste nel poter visualizzare il resto del contenuto. Questo può essere fatto in vari modi. In questo articolo, utilizziamo una serie di collegamenti circolari su cui è possibile fare clic:

L'ultima cosa da fare per far funzionare lo slider è rendere ogni collegamento cliccabile. Ciò richiederà alcune modifiche CSS insieme ad alcuni JavaScript, ma niente di troppo complicato. E questa, miei cari amici e nemici, è l'intera breve panoramica di ciò in cui consiste un dispositivo di scorrimento dei contenuti.

Nelle prossime sezioni, esamineremo l'effettivo codice HTML, CSS e JavaScript che alimenterà il nostro dispositivo di scorrimento.

Contenuto

Seguiamo gli stessi passaggi che abbiamo trattato nel brief e iniziamo con... contenuto. Innanzitutto, dobbiamo creare un punto di partenza. Creiamo un documento HTML vuoto e aggiungiamo il seguente codice dal modello di avvio HTML5 ad esso:

Questo markup non fa altro che dare la struttura del documento, ma è il primo passo che ci permetterà di aggiungere ulteriormente il nostro contenuto. Facciamolo nella prossima sezione.

contenuto ( reale questa volta)

All'interno dell'elemento body, aggiungi il seguente codice HTML:

Tra i tag di stile, aggiungi le seguenti regole di stile che definiscono la forma e il colore del nostro contenuto:

#wrapper ( width: 2200px; position: relative; left: 0px; ) .content ( float: left; width: 550px; height: 350px; white-space: normal; background-repeat: no-repeat; ) #itemOne ( background -color: #ADFF2F; background-image: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo ( background-color: #FF7F50; background-image: url("http ://www.kirupa.com/images/yellowSquare.png"); ) #itemThree ( colore di sfondo: #1E90FF; immagine di sfondo: url("http://www.kirupa.com/images/pinkSquare.png "); ) #itemFour ( colore di sfondo: #DC143C; immagine di sfondo: url("http://www.kirupa.com/images/graySquare.png"); )

Ora quando visualizzi la pagina, vedrai qualcosa di simile a quanto mostrato nello screenshot:

Vedrai quattro grandi blocchi rettangolari disposti ordinatamente fianco a fianco. A seconda della risoluzione dello schermo e delle dimensioni della finestra del browser, potrebbe essere necessario scorrere un po' a destra oa sinistra per vedere tutti i rettangoli.

Ora presta un po' di attenzione e cerca di capire perché vedi quello che vedi. Esamina il markup HTML e comprendi gli elementi che sono nel tuo documento.

Presta attenzione alla classe e ai valori id che utilizza perché seguiranno le regole di stile che hai aggiunto. Guarda le regole di stile e come il loro rendering influisce sul risultato. Ora ricapitoliamo tutto questo.

Cosa abbiamo fatto

Nel nostro markup HTML, il contenuto che vedi è costituito da quattro elementi div, ciascuno contenente un valore di classe di contenuto. Questo valore di classe deriva dalla regola di stile .content, che determina la dimensione di ciascun blocco: 550 pixel di larghezza per 350 pixel di altezza:

Contenuto ( float: sinistra; larghezza: 550px; altezza: 350px; spazio bianco: normale; ripetizione dello sfondo: nessuna ripetizione; )

La regola dello stile .content imposta anche il valore float su left . Di conseguenza, gli elementi div si allineano. E l'ultima cosa dichiarata da questa regola di stile è la proprietà degli spazi bianchi. Questa proprietà determina come verrà avvolto il testo nel paragrafo.

Ho usato questa proprietà solo per comodità. Se decidi di andare oltre lo scopo di questo articolo e aggiungere contenuto a ciascuno degli elementi div, mi sarai grato che il tuo testo sarà avvolto correttamente o rimuoverai questa proprietà ( o impostarlo su un altro valore) se non vuoi vederlo.

A questo punto, il nostro elemento div è montato e allineato correttamente. Peccato che sia completamente invisibile:

Per risolvere questo problema, diamo a ciascun div un ID univoco attraverso i valori id: itemOne , itemTwo , itemThree , anditemFour . Nella sezione stili, abbiamo quattro regole di stile che corrispondono a questi valori id:

#itemOne ( colore di sfondo: #0099CC; immagine di sfondo: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo (colore di sfondo: #FFCC00; immagine di sfondo: url("http://www.kirupa.com/images/yellowSquare.png"); ) #itemThree ( background-color: #FF6666; background-image: url("http://www.kirupa.com/images /pinkSquare.png"); ) #itemFour ( background-color: #E8E8E8; background-image: url("http://www.kirupa.com/images/graySquare.png"); )

Come puoi vedere, queste regole di stile definiscono solo il colore di sfondo e l'immagine di sfondo per i nostri contenuti. D'ora in poi, gli elementi div non sono più invisibili. Vengono visualizzati come rettangoli di diversi colori con una dimensione di 550 per 350 pixel.

Abbiamo quasi finito. L'ultima cosa che vedremo è il misterioso div che contiene l'id wrapper:

Questo elemento racchiude tutti i nostri contenuti in un unico contenitore. Questo non è il contenitore che avevo in mente nella recensione quando ho parlato di ritagliare tutto il contenuto attorno ai blocchi di contenuto.

Questo contenitore è progettato in modo leggermente diverso. Si limita letteralmente a avvolgere il contenuto in modo che possiamo visualizzarlo tutto.

La regola di stile #wrapper corrispondente esegue questo compito:

#wrapper ( larghezza: 2200px; posizione: relativa; sinistra: 0px; )

Innanzitutto, questa regola di stile definisce la larghezza dell'elemento wrapper come 2200px. Cioè, la larghezza totale del nostro contenuto ... che ottieni moltiplicando 4 ( per numero di div) di 550 pixel.

La posizione e le proprietà di sinistra sono lì per impostare la possibilità di spostare il contenitore in qualsiasi posto desideriamo. Impostando la proprietà position su relativo , rimuoviamo questo elemento dalla struttura del documento standard e rendiamo possibile posizionarlo ovunque utilizzando valori di pixel relativi a dove si trova attualmente.

Poiché i nostri blocchi di contenuto div sono figli di questo div , vengono spostati nel punto in cui si trova il div padre. Come puoi immaginare, questo è molto conveniente!

Rifilare il contenuto

Nella sezione precedente, ci siamo occupati del rendering dei blocchi di contenuto. La prossima cosa che faremo è ritagliare il nostro contenuto in modo che sia visibile un solo blocco di scorrimento alla volta.

È lì che avremo bisogno del contenitore principale. Avvolgi tutti i div nel tuo codice HTML in un div con l'id contentContainer :

Basta aggiungere due nuove righe e, se lo desideri, rientri di riga, che sono lì solo per disporre correttamente l'HTML.

Ora, se guardi il nostro contenuto avvolto (ancora una volta), non vedrai nulla di nuovo. Il semplice wrapping degli elementi in un altro div non fa nulla di significativo, tanto meno quello che vogliamo fare per ritagliare il contenuto.

Per aggiungere questa azione significativa, crea la seguente regola di stile #contentContainer:

#contentContainer ( larghezza: 550px; altezza: 350px; bordo: 5px nero solido; overflow: nascosto; )

Tieni presente che stai impostando la dimensione dell'elemento contentContainer su 550 px per 350 px. Cioè, esattamente la stessa dimensione di ciascuno dei blocchi di contenuto. Per far risaltare leggermente il cursore, impostiamo un bordo nero con una larghezza di 5 pixel.

L'ultima cosa che facciamo è ritagliare il contenuto impostando la proprietà di overflow su hidden . Questo serve per nascondere tutto al di fuori dell'elemento contentContainer.

Tutti insieme ci danno la seguente immagine nel browser:

Nota che ora è visibile solo il contenuto del tuo primo blocco. Il resto del contenuto è ancora lì, è solo nascosto ora a causa del nostro ritaglio tramite il valore nascosto della proprietà di overflow.

Collegamenti di navigazione

Quindi siamo arrivati ​​a loro! Ci stiamo avvicinando ad avere uno slider completamente funzionante. In questa sezione daremo un'occhiata ai link di navigazione, gli elementi su cui fai clic per vedere altri blocchi di contenuto.

Questi collegamenti non hanno nulla a che fare con il nostro contentContainer o qualsiasi altro pezzo di HTML che abbiamo già. Devi aggiungere le righe evidenziate al codice HTML che già abbiamo (ma sopra il tag script):

Diamo una rapida occhiata all'HTML che hai appena aggiunto. Innanzitutto, abbiamo un div con id navLinks , che descrive un elenco non ordinato. I collegamenti stessi sono presentati come voci di elenco.

Ciascun elemento dell'elenco contiene un valore di classe itemLinks, nonché un attributo data-* personalizzato chiamato data-pos . Torneremo tra poco su questo attributo, ma per ora basta notare che esiste.

Abbiamo bisogno di dare uno stile all'HTML che abbiamo appena aggiunto. Nella sezione stili, aggiungi le seguenti regole:

#navLinks ( text-align: center; width: 550px; ) #navLinks ul ( margin: 0px; padding: 0px; display: inline-block; margin-top: 6px; ) #navLinks ul li ( float: left; text- align: center; margin: 10px; stile elenco: nessuno; cursore: puntatore; colore di sfondo: #CCCCCC; padding: 5px; raggio del bordo: 50%; bordo: nero 5px solido; ) #navLinks ul li:hover ( background-color: #FFFF00; ) #navLinks ul li.active ( background-color: #333333; color: #FFFFFF; outline-width: 7px; ) #navLinks ul li.active:hover ( background-color: #484848; colore: #FFFFFF; )

Wow, così tanto CSS. Anche se c'è molto codice, non c'è nulla di veramente unico o interessante in esso. Parte del codice CSS prevede la creazione di un menu orizzontale con link visualizzati uno accanto all'altro.

Il resto del codice definisce l'aspetto di ogni collegamento, così come la sua evidenziazione corrispondente quando si passa con il mouse.
Ad un certo punto, però, vale la pena soffermarsi più nel dettaglio.

Ciò è dovuto a due regole di stile specifiche della classe attiva:

#navLinks ul li.active ( colore di sfondo: #333333; colore: #FFFFFF; larghezza contorno: 7px; ) #navLinks ul li.active:hover (colore di sfondo: #484848; colore: #FFFFFF; )

Se ricordi, nel nostro codice HTML non c'era alcun elemento che avrebbe un valore di classe attivo . Nonostante ciò, queste regole di stile rimarranno in vigore perché la classe attiva viene aggiunta dinamicamente a uno dei nostri link.

Se hai difficoltà a capire tutto questo in questo momento, non preoccuparti, lo tratteremo in dettaglio molto presto.

Al momento il nostro slider si presenta così:

Se il tuo dispositivo di scorrimento non sembra corretto, allora ci sono buone probabilità che tu abbia commesso un errore di battitura... o qualcos'altro. È quello che è successo?

Creazione del cursore stesso

Ok, a questo punto abbiamo qualcosa che assomiglia molto a uno slider funzionante. Tuttavia, quando si fa clic su uno qualsiasi dei collegamenti, non accade assolutamente nulla.

Ora creiamo uno slider funzionante, ma prima aggiungiamo alcuni JavaScript e alcuni elementi interessanti... vale a dire, bellissime transizioni CSS.

Aggiunta di JavaScript

All'interno del tag script, aggiungi le seguenti righe di codice JavaScript:

// sto solo richiedendo il DOM... come se chiedessi il permesso a un capo! var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper"); // activeLink fornisce un'etichetta per l'elemento attivo var activeLink = 0; // imposta il monitoraggio degli eventi per (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); // определяем элемент для activeLink link.itemID = i; } // устанавливаем первый элемент в качестве активного links.classList.add("active"); < links.length; i++) { links[i].classList.remove("active"); } } // Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }

Tutto ciò che ci resta da fare è garantire una transizione graduale anziché brusche transizioni diapositive.

Aggiunta di una transizione

Al momento abbiamo un dispositivo di scorrimento dei contenuti che non scorre ancora in modo fluido. Invece, le diapositive saltano bruscamente da una all'altra. Per far scorrere il contenuto in modo fluido, utilizziamo una transizione CSS. Aggiungiamo una delle possibili transizioni al nostro slider.

Trova la regola di stile #wrapper e aggiungi una riga ad essa:

La linea che hai aggiunto definisce la transizione. La proprietà specificata in esso specifica che la transizione deve avvenire quando la proprietà sinistra cambia. La nostra transizione richiederà 0,5 secondi e utilizzerà la funzione di temporizzazione allentamento in uscita per accelerare il processo all'inizio della transizione e rallentarlo alla fine.

Poiché la proprietà di transizione sta ancora subendo alcune modifiche nel W3C, sarà necessario utilizzare i prefissi per garantire che qualsiasi browser moderno possa applicare la transizione. Se non vuoi occuparti di questo, aggiungi il seguente script appena prima del tag script:

No, questo script non fa nulla di dannoso. Questa è la versione ospitata. Librerie Leia Verou -senza prefisso. Invece di imparare un sacco di cose su come funzionano gli slider, puoi anche semplicemente scaricare il suo script, caricarlo sul tuo server e collegarti alla tua versione.

Ad ogni modo, se stai visualizzando il documento ora, dovresti avere un dispositivo di scorrimento del contenuto funzionante che fa scorrere il contenuto in modo fluido quando fai clic su uno qualsiasi dei collegamenti di navigazione. Dovrebbe essere identico a quello che hai visto nell'esempio pubblicato all'inizio di questo articolo.

Infine!!!

Codice di analisi (e tutto il resto!)

Ora che abbiamo un dispositivo di scorrimento del contenuto funzionante, proviamo a capire dall'inizio come il codice lega tutto insieme.

Cosa sta succedendo davvero

Dopo aver caricato il dispositivo di scorrimento del contenuto, puoi vedere come viene visualizzato il primo blocco di contenuto. Il resto del contenuto è tagliato e nascosto alla vista:

Facendo clic su qualsiasi collegamento viene visualizzato il blocco di contenuto corrispondente. Quale parte del contenuto visualizzare nell'area visibile, il dispositivo di scorrimento sa grazie alla stretta relazione tra ciascun collegamento di navigazione e la posizione dei pixel di ciascun blocco di contenuto.

Proviamo a capire questa connessione. Ci sono alcune cose che sappiamo. Sappiamo che ciascuno dei nostri blocchi di contenuti è largo 550 pixel. Sappiamo anche che il nostro primo blocco di contenuti è impostato orizzontalmente su 0px.

Come facciamo a saperlo? Tutti i nostri blocchi di contenuto sono racchiusi in un elemento wrapper che racchiude tutto il nostro contenuto e il bordo sinistro dell'elemento wrapper ha una posizione di 0px:

Questo è dichiarato nella regola di stile #wrapper. Sappiamo anche da questa regola di stile che tutti i blocchi di contenuto vengono spostati a sinistra e allineati uno accanto all'altro.

Sapendo questo, possiamo calcolare le posizioni per tutti i blocchi di contenuto in questo modo:

Il primo blocco si trova a 0 pixel. La larghezza del primo blocco di contenuto è la posizione del secondo blocco. Sono 550 pixel. Ogni blocco successivo ha una posizione 550 pixel in più rispetto al precedente.

Poiché conosciamo l'esatta posizione dei pixel di ciascun blocco di contenuto, possiamo utilizzare queste informazioni per indicare al dispositivo di scorrimento del contenuto di spostare l'elemento wrapper nel posto giusto in modo che il contenuto che desideriamo sia visibile.

L'attributo data-pos!

Ottimo, ora conosciamo le posizioni di tutti i blocchi di contenuto. Quello che non abbiamo ancora trattato è come conoscere la posizione del blocco di contenuto in pixel ci aiuterà a visualizzare il blocco giusto nella finestra di scorrimento.

Come possiamo specificare che quando si fa clic su un collegamento, deve essere visualizzato un determinato blocco di contenuti? Solo. Ogni collegamento contiene la posizione esatta (in pixel) del blocco di contenuto a cui corrisponde:

Si noti che l'attributo data-pos indica a ciascuno dei collegamenti il ​​valore di ciascuno degli attributi data-pos. Sono uguali al valore negativo della posizione orizzontale originale di ciascuno dei blocchi di contenuto.

Quando facciamo clic su un collegamento, JavaScript viene utilizzato per leggere l'attributo data-pos associato a quel collegamento, quindi alternare il valore della posizione del pixel del nostro elemento wrapper al valore che è stato letto dall'attributo.

Ad esempio, questo è ciò che accade dopo aver cliccato sul terzo link:

Il terzo collegamento ha un valore data-pos di 1100 pixel. Ciò corrisponde al numero di pixel che la skin del contenitore dovrà spostare affinché il terzo blocco di contenuto venga visualizzato nell'area visibile. Facendo clic su qualsiasi altro collegamento, la proprietà dell'elemento wrapper verrà impostata sul valore contenuto nell'attributo data-pos di quel collegamento.

Ok, abbiamo affrontato la relazione tra link e posizione del contenuto di cui ho parlato prima. Ora non ci resta che considerare JavaScript, che trasformerà tutto ciò di cui ho scritto in questa sezione in qualcosa che sarà compreso dal browser.

Si tratta di JavaScript

Dato che ora hai una comprensione concettuale di come funziona tutto all'interno del nostro dispositivo di scorrimento dei contenuti, diamo un'occhiata ad alcuni JavaScript che implementano tutto ciò che sai. Come faccio in tutti i miei articoli, analizziamo ogni riga di JavaScript e vediamo cosa fa per il nostro slider.

Partiamo dall'alto:

var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper");

La variabile links prende un insieme di tutti gli elementi nel nostro documento che hanno un valore di classe itemLinks. Questi elementi sono voci di elenco che fungono da collegamenti di navigazione. La variabile wrapper è molto simile ai link. Prende un puntatore a un elemento con id wrapper.

querySelector e querySelectorAll

Nota come sto interrogando il DOM . Invece di usare qualcosa come getElementsByClassName o getElementById , utilizzo le nuove funzioni querySelectorAll e querySelector.

Vedrai che useremo entrambe queste variabili in seguito, quindi tienile a mente.

var collegamento attivo = 0;

La variabile activeLink viene utilizzata per memorizzare la posizione del contenuto attualmente visualizzato. Capirai meglio il significato di questa variabile quando la spiegherò in azione un po' più tardi.

Il prossimo insieme di righe è un ciclo for:

// imposta il monitoraggio degli eventi per (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }

Qui ripetiamo ogni elemento delle variabili link e gli assegniamo un listener di eventi. Questo tracker eventi chiamerà la funzione setClickedItem quando viene rilevato un evento di clic.

La riga successiva provoca una serie di modifiche:

// imposta il primo elemento come link attivi classList. add("active");

Aggiungiamo il valore della classe attiva all'elemento del primo collegamento di navigazione. Questo viene fatto passando il valore activeLink all'array links. Poiché activeLink è 0 , l'array di solito prende il primo elemento e usa l'API classList per aggiungere il valore della classe attiva.

Dopo che questa riga di codice è stata eseguita, ricordi che abbiamo prestato attenzione alle seguenti regole di stile?

Bene, ora queste regole di stile entrano in gioco e aiutano a far risaltare il collegamento di navigazione attivo dall'elenco di altri collegamenti inattivi. Torneremo su queste regole di stile un po' più tardi e le esamineremo più in dettaglio.

La prossima cosa che esamineremo è il gestore dell'evento setClickedItem, che viene chiamato quando si fa clic su uno qualsiasi dei collegamenti:

funzione setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )

Questa funzione prima cambia lo stato di tutti i tuoi collegamenti in inattivo chiamando removeActiveLinks . Daremo un'occhiata a questa funzione un po 'più tardi.

L'altra cosa importante che fa questa funzione è che cambia il valore della proprietà itemID dell'elemento selezionato su activeLink . Ciò garantisce che activeLink punti sempre al numero che corrisponde al blocco di contenuto attualmente visualizzato nel dispositivo di scorrimento.

Dopo aver fatto questi due piuttosto noioso) azioni, questa funzione passa un riferimento all'elemento selezionato alla funzione changePosition. Che a sua volta fa un paio di cose incredibili, che tratterò nel prossimo paragrafo.

È qui che accadono i cambiamenti interessanti! Facciamo un salto in avanti e osserviamo la funzione changePosition:

// Il gestore cambia la posizione dello slider, dopo che ci siamo assicurati // che il link di cui abbiamo bisogno sia contrassegnato come attivo. funzione changePosition(link) ( link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; )

Questa funzione fa due cose:
IO. Alterna la visualizzazione visiva del collegamento selezionato per indicare che è attualmente attivo.
II. Imposta la posizione dell'elemento wrapper.

Diamo un'occhiata a queste due cose in modo più dettagliato.

Attiva o disattiva la visualizzazione visiva del collegamento selezionato/attivo

Per aiutarti a capire di cosa ho parlato prima, i tuoi collegamenti di navigazione possono trovarsi in uno dei due stati. Questi stati consentono all'utente di vedere quale blocco di contenuto è attualmente attivo:

In questa figura è possibile determinare immediatamente che il blocco di contenuto corrispondente al quarto collegamento è attualmente attivo e che i primi tre collegamenti sono inattivi.

Questa modifica nell'aspetto visivo viene eseguita aggiungendo e rimuovendo classi CSS. La classe attiva viene aggiunta al collegamento attivo. Tutti i collegamenti non attivi non contengono un valore di classe attivo. Capirai come funziona quando esamineremo la funzione removeActiveLinks.

In ogni caso, ricorda che prima abbiamo chiamato le seguenti due regole di stile:

#navLinks ul li.active ( colore di sfondo: #333333; colore: #FFFFFF; larghezza contorno: 7px; ) #navLinks ul li.active:hover (colore di sfondo: #484848; colore: #FFFFFF; )

Nella nostra funzione setClickedItem ( nota anche come funzione che verrà chiamata a seguito del clic sul collegamento), prima chiamiamo removeActiveLinks :

funzione setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )

Questa funzione è responsabile della rimozione della classe attiva per tutti i collegamenti di navigazione:

funzione removeActiveLinks() ( per (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Puoi pensarlo come un pulsante di ripristino globale. Scorre i collegamenti di navigazione memorizzati nella variabile links e rimuove il valore della classe attiva utilizzando classList.remove() . Tieni presente che se uno qualsiasi dei collegamenti di navigazione conteneva un valore di classe attivo, beh... non esisterà più.

Pertanto, abbiamo visto come rimuovere la classe attiva da tutti i tuoi collegamenti. Aggiungere una classe a sua volta è molto semplice:

funzione removeActiveLinks() ( per (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Lo stesso ClassList che abbiamo usato in precedenza per rimuovere il valore della classe attiva, lo usiamo per aggiungere il valore della classe attiva al collegamento selezionato. Questo collegamento selezionato riceve un argomento collegamento che gli viene passato.

Impostazione della posizione del guscio

Abbiamo quasi finito! Dopo tutti questi passaggi, siamo finalmente arrivati ​​alla funzione changePosition, che in realtà imposta la posizione dell'elemento slider wrapper e mostra il blocco di contenuto corrispondente al collegamento selezionato.

Diamo un'occhiata al seguente snippet:

funzione changePosition(link) ( link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; )

La variabile di posizione memorizza il valore dell'attributo data-pos del collegamento su cui abbiamo fatto clic. Dopo aver ottenuto il valore dell'attributo data-pos, impostiamo la proprietà CSS sinistra dell'elemento wrapper sullo stesso valore.

Come si collega questo all'implementazione dell'effetto slider? Vi ricordate che tempo fa abbiamo aggiunto una regola allo stile #wrapper?

#wrapper (larghezza: 2200px; posizione: relativa; sinistra: 0px; transizione: sinistra 0,5s allentamento in uscita; )

Si noti che abbiamo definito la transizione in modo che abbia effetto quando la proprietà sinistra cambia. Indovina cosa sta facendo il nostro JavaScript? Imposta la proprietà sinistra! La transizione CSS rileva questa modifica e attiva lo spostamento del contenuto. Tutto ciò che serve per far funzionare tutto è aggiungere una riga di JavaScript.

Non so voi, ma per me è semplicemente fantastico. Questo è qualcosa che non avremmo potuto immaginare alcuni anni fa, quando abbiamo dovuto dedicare molto impegno e codice per gestire l'effetto slider. Questo è ciò che rende bello il nostro dispositivo di scorrimento dei contenuti.

Proprio così, abbiamo appena creato un dispositivo di scorrimento dei contenuti da zero e (cosa ancora più importante) abbiamo imparato come funziona.

Miglioramenti al dispositivo di scorrimento dei contenuti

Il dispositivo di scorrimento dei contenuti che abbiamo appena creato è piuttosto interessante, ma possiamo renderlo ancora più interessante. In questa sezione, esamineremo due miglioramenti che potresti trovare molto utili. Lungo la strada, impareremo alcuni nuovi trucchi JavaScript e CSS. Sarà, come dicono oggi i giovani: “Sto piangendo!”.

Scorrimento con translate3d transform

Al momento, le nostre diapositive stanno scorrendo modificando il valore della proprietà CSS di sinistra, che viene applicata all'elemento div del wrapper. Usando la proprietà left, facciamo funzionare lo slider, ma questo metodo ha seri inconvenienti. Non è possibile utilizzare l'accelerazione hardware per garantire transizioni fluide delle diapositive.

Ciò è particolarmente vero per i dispositivi mobili con velocità Internet basse che utilizzano frequentemente l'hardware e qui possono essere particolarmente evidenti diapositive mosse e irregolari.

Questo può essere risolto con la funzione di trasformazione translate3d, che farà muovere le diapositive senza intoppi. Questa funzione accetta i valori x , y e z come argomenti e la modifica di uno qualsiasi di questi valori cambierà la posizione dell'elemento di destinazione.

Una caratteristica di questa funzione è anche che, a seguito del suo utilizzo, l'hardware del browser accelera il cambio di posizione. Cosa stiamo aspettando?

La prima cosa che dobbiamo fare è cambiare la regola di stile #wrapper. Sostituire la dichiarazione delle proprietà position e left con il codice seguente:

Pertanto, con l'aiuto della trasformazione, viene impostata la posizione iniziale dell'elemento wrapper.

Primo passo: aggiungere elementi ausiliari

Nel primo passaggio, aggiungi il seguente codice di supporto sotto il codice principale che abbiamo attualmente:

// // Utilizzo delle trasformazioni // var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName(transforms); // funzione di gestione dei prefissi dei fornitori getSupportedPropertyName(properties) ( for (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }

Questo codice ci aiuterà a impostare la proprietà di trasformazione con i prefissi del fornitore in modo che sia supportata dal numero massimo di browser.

In questo articolo, non spiegherò queste righe. L'unica cosa che devi sapere è che tutto questo codice aiuta a impostare la proprietà su transform , msTransform , mozTransform o oTransform . A seconda dell'età del browser che stai utilizzando, verrà utilizzato uno di questi valori.

Seconda fase: l'introduzione di Ahoy!

Nella funzione changePosition, trova le seguenti righe di codice:

funzione changePosition(link) ( var position = link.getAttribute("data-pos"); wrapper.style.left = position; link.classList.add("active"); )

Sostituiscili con il seguente codice:

function changePosition(link) ( var position = link.getAttribute("data-pos"); var translateValue = "(!LANG:translate3d(" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}

Questo codice fa cose piuttosto semplici. La variabile translateValue crea una rappresentazione basata sulle stringhe della funzione translate3d, in cui la parte X viene riempita con il valore della variabile di posizione. Una volta creata questa stringa, non dobbiamo far altro che passarla all'oggetto style dell'elemento wrapper.

Si noti che la definizione della proprietà di stile corrispondente è gestita dalla variabile transformProperty, di cui abbiamo già parlato poco prima.

Se ora visualizzi il documento, vedrai che i blocchi di contenuto nel dispositivo di scorrimento saltano da un punto all'altro.

Ovviamente, questo non è quello che ti aspettavi di vedere. Cosa è successo al viaggio senza intoppi? La risposta è che ci manca un altro cambiamento. Fortunatamente, questo è facile da risolvere. Se torniamo alla regola di stile #wrapper, noteremo che la dichiarazione di transizione è simile a questa:

#wrapper (larghezza: 2200px; trasformazione: translate3d(0, 0, 0); transizione: sinistra .5s facilità-in-uscita; )

La nostra transizione tiene traccia delle modifiche alla proprietà di sinistra. Non utilizziamo più questa proprietà, quindi la nostra transizione non può iniziare a funzionare. Per correggere questa terribile ingiustizia, sostituisci la parola chiave della proprietà sinistra all'interno della dichiarazione di transizione con la parola chiave della proprietà transform:

#wrapper ( width: 2200px; transform: translate3d(0, 0, 0); transition: transform .5s easy-in-out; )

Una volta apportate queste modifiche, il nostro dispositivo di scorrimento funzionerà di nuovo più o meno allo stesso modo di prima.

L'unica differenza è che le transizioni delle diapositive ora sono accelerate dall'hardware e ora funzioneranno in modo più fluido e saranno supportate su più dispositivi.

Cambio vetrino automatico a intervalli di pochi secondi

Attualmente, le nostre diapositive cambiano solo quando facciamo clic su uno dei collegamenti di navigazione. Ma non è l'unico modo in cui funziona il dispositivo di scorrimento. Molti dispositivi di scorrimento del contenuto scorrono automaticamente il contenuto ogni pochi secondi e c'è anche la possibilità di passare a una sezione specifica utilizzando i collegamenti di navigazione.

Puoi vedere un esempio di uno di questi dispositivi di scorrimento dei contenuti di seguito:

Sì, questo è il nostro vecchio dispositivo di scorrimento che è stato leggermente modificato in modo che il contenuto possa scorrere automaticamente all'interno del contenitore. Indovina cosa faremo dopo?

Facciamo scorrere automaticamente le diapositive!

La funzione setInterval ci aiuterà in questo. Il compito principale di questa funzione è garantire che il codice venga eseguito a intervalli regolari:

window.setInterval(functionToCall, delay);

Ogni pochi secondi ( o quanti ne hai impostati come valore di intervallo), la funzione setInterval indica al nostro dispositivo di scorrimento di passare al blocco di contenuto successivo.

Al termine del contenuto, il dispositivo di scorrimento torna all'inizio del contenuto e ricomincia da capo. Questo è fatto abbastanza facilmente. Devi solo conoscere alcuni trucchi e avere una solida comprensione di come funziona il tuo dispositivo di scorrimento dei contenuti.

La prima modifica che dobbiamo apportare è aggiungere il codice aggiuntivo necessario per farlo funzionare. Alla fine del codice che hai già, aggiungi le seguenti righe:

// // Codice per il cambio diapositiva automatico // var timeoutID; funzione startTimer() ( // aspetta 2 secondi prima di chiamare goInactive timeoutID = window. setInterval(goToNextItem, 2000); ) startTimer(); funzione goToNextItem() ( removeActiveLinks(); se (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }

Cosa significa tutto questo codice, lo esamineremo a breve. Ora aggiungi tutto. Dopo averlo fatto, visualizza il dispositivo di scorrimento del contenuto nel tuo browser. Vedrai le diapositive del contenuto cambiare nel contenitore ogni due secondi.

C'è solo un cambiamento significativo da fare. Ora le diapositive cambiano ogni due secondi, indipendentemente dal fatto che tu abbia fatto clic sul collegamento di navigazione o meno.

La cosa corretta da fare è reimpostare il timer su 0 quando si fa clic su uno dei collegamenti.Per apportare questa modifica, aggiungere la seguente riga di codice al gestore di eventi setClickedItem:

Dopodiché, il dispositivo di scorrimento del contenuto si comporterà correttamente quando entri e fai clic sul collegamento di navigazione. Evviva!

Spiegazione del cambio diapositiva automatico

Quindi, abbiamo solo una cosa di cui occuparci. Diamo una rapida occhiata al codice che abbiamo appena aggiunto e vediamo perché fa quello che fa.

Iniziamo con la funzione goToNextItem/span>:

funzione goToNextItem() ( removeActiveLinks(); se (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}

Questa funzione ha il compito di tenere traccia del contenuto attualmente visualizzato e di ciò che lo seguirà. Per capire meglio cosa sta succedendo, dai un'occhiata all'immagine qui sotto:

La variabile activeLink punta alla posizione del blocco di contenuto attualmente visualizzato. Ogni informazione è associata a un elemento corrispondente all'interno dell'array di collegamenti.

Il numero totale di elementi all'interno dell'array links può essere impostato tramite la proprietà length. Ora torniamo al nostro codice.

L'istruzione if della funzione goToNextItem controlla semplicemente se è ancora presente del contenuto o se il dispositivo di scorrimento deve tornare all'inizio:

se (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; }

Se guardi da vicino il diagramma e il codice, capirai la logica. Fondamentalmente, una volta ottenuto il valore giusto per activeLink , tutto il resto nel nostro dispositivo di scorrimento funzionerà per magia.

La magia stessa viene eseguita con le seguenti due righe fornite dalla funzione changePosition, che a sua volta viene chiamata con un puntatore al blocco di contenuto successivo da generare:

var newLink = link; cambiaPosizione(nuovoLink);

Al momento, il modo in cui viene elaborato il nostro codice non è diverso da come è stato elaborato facendo clic manualmente sul collegamento.

Quindi... abbiamo esaminato il codice nella funzione goToNextItem per passare al contenuto successivo. Per chiamare questa diapositiva, vengono utilizzate automaticamente le seguenti righe:

vartimeoutID; funzione startTimer() ( // aspetta 2 secondi prima di chiamare goInactive timeoutID = window. setInterval(goToNextItem, 2000); ) startTimer(); funzione resetTimer() ( window.clearInterval(timeoutID); startTimer(); )

La funzione startTimer viene utilizzata per iniziare. Questa funzione contiene una chiamata a setInterval , che assicura che la funzione goToNextItem venga chiamata ogni 2 secondi ( o 2000 millisecondi).

Aggiungendo semplicemente questa funzione (e chiamandola) farai sì che il dispositivo di scorrimento del contenuto inizi a scorrere automaticamente i blocchi di contenuto.

Resta solo da capire come viene ripristinato il timer ( che ho chiamato setInterval) quando si fa clic manualmente sul collegamento. Per far fronte a questo, viene utilizzato il codice rimanente che abbiamo.

Il metodo con cui il timer viene azzerato è il seguente: fermiamo la funzione setInterval e poi la riavvieremo. Come questo è fatto può essere un po' difficile da capire.

Salviamo l'id della funzione setInterval chiamata, quindi utilizziamo lo stesso id per interrompere la chiamata della stessa funzione setInterval in un secondo momento. Lasciatemi spiegare.

Memorizziamo questo identificatore nella variabile timeoutID e lo inizializziamo nella chiamata startTimer, ed è conveniente utilizzare lo stesso identificatore all'interno della funzione resetTimer:

funzione resetTimer() ( window.clearInterval(timeoutID); startTimer(); )

La funzione clearInterval prende l'ID (tramite timeoutID ) della funzione setInterval che vogliamo interrompere.

Dopo aver arrestato il timer all'interno della funzione resetTimer, chiamiamo startTimer e ricominciamo tutto da capo:

funzione resetTimer() ( window.clearInterval(timeoutID); startTimer(); )

La logica è semplice. Il timer si interrompe quando selezioni manualmente quale blocco di contenuto visualizzare nel dispositivo di scorrimento:

funzione setClickedItem(e) ( removeActiveLinks(); resetTimer(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )

Dopo aver selezionato un nuovo blocco di contenuti, il dispositivo di scorrimento si ferma per due secondi prima di passare al blocco successivo. Il monitoraggio di tutto ciò viene effettuato dalle funzioni startTimer e resetTimer.

Conclusione

Questo è tutto, abbiamo spiegato come creare un bellissimo dispositivo di scorrimento dei contenuti usando solo

HTML

css

e JavaScript. Inoltre, hai imparato come apportare alcune modifiche per migliorare le prestazioni e abilitare la modifica automatica dei blocchi di contenuto.

Sebbene lo slider stesso non sia definito da molto codice, potrebbe volerci un po' di tempo per scomporre i concetti alla base. Ho inserito nell'articolo collegamenti ad altre fonti che trattano argomenti che ho toccato solo superficialmente. Puoi leggerli quando hai tempo per farlo.

I dispositivi di scorrimento dei contenuti sono disponibili in tutte le forme e dimensioni. Alcuni sono costituiti da più livelli, in cui il contenuto può essere modificato sia verticalmente che orizzontalmente.

Alcuni dispositivi di scorrimento contengono contenuto allineato verticalmente con blocchi impilati uno sopra l'altro. Se sei piuttosto intraprendente e vuoi usare i CSS invece della transizione

Per cominciare, questo articolo è stato scritto con lo scopo di spiegare come creare uno slider per lo scorrimento delle immagini per le pagine web. Questo articolo non è in alcun modo di natura educativa, serve solo come esempio di come il nostro oggetto di considerazione può essere implementato. Puoi usare il codice fornito in questo articolo come una sorta di modello per tali sviluppi, spero di essere in grado di trasmettere al lettore in modo sufficientemente dettagliato e in modo accessibile l'intera essenza di ciò che ho scritto.

E ora al punto, non molto tempo fa avevo bisogno di mettere un dispositivo di scorrimento su un sito, ma quando ho cercato su Internet script già pronti, non ho trovato nulla di utile, perché. alcuni non funzionavano come mi serviva, mentre altri non si avviavano affatto senza errori nella console. Utilizzo plugin jQuery per uno slider, mi è sembrato troppo poco interessante, perché. anche se risolverò il problema con questo, non avrò alcuna comprensione del funzionamento di questo meccanismo e l'uso del plug-in per il bene di uno slider non è molto ottimale. Inoltre, non volevo davvero capire script storti, quindi ho deciso di scrivere il mio script per lo slider, che io stesso contrassegnerò di cui ho bisogno.

Innanzitutto, dobbiamo decidere la logica dello slider stesso, quindi procedere con l'implementazione, in questa fase è molto importante avere una chiara comprensione del funzionamento di questo meccanismo, perché senza di esso non possiamo scrivere codice che funzioni esattamente come vogliamo.

Il nostro oggetto principale sarà vista, cioè il blocco in cui vedremo come girano le nostre immagini, in esso avremo involucro di diapositive, questo sarà il nostro blocco contenente tutte le immagini allineate in una riga, e che cambierà la sua posizione all'interno del file vista.


Inoltre, sui lati all'interno vista, verticalmente al centro, ci saranno i pulsanti avanti e indietro, quando cliccati, cambieremo anche la posizione del nostro involucro di diapositive relativamente vista, provocando così l'effetto di scorrimento delle immagini. E infine, l'ultimo oggetto saranno i nostri pulsanti di navigazione, situati in basso vista.


Quando si fa clic su di essi, esamineremo semplicemente il numero di serie di questo pulsante e ci sposteremo nuovamente sulla diapositiva di cui abbiamo bisogno spostandoci involucro di diapositive(il turno sarà effettuato tramite cambio trasformare le proprietà CSS, il cui valore sarà costantemente calcolato).

Penso che la logica di tutta questa faccenda dovrebbe essere chiara dopo quello che ho detto sopra, ma se ci sono ancora incomprensioni da qualche parte, allora tutto sarà chiarito nel codice, hai solo bisogno di un po' di pazienza.

Adesso scriviamo! Per prima cosa, apriamo il nostro file di indice e scrivi il markup di cui abbiamo bisogno lì:

Come puoi vedere, niente di complicato blocco per cursore serve come lo stesso blocco in cui verrà posizionato il nostro cursore, al suo interno è già vista, che contiene il nostro involucro di diapositive, alias elenco annidato, qui li sono diapositive e img- immagini al loro interno. Si prega di prestare attenzione al fatto che tutte le immagini devono avere le stesse dimensioni o almeno le proporzioni, altrimenti lo slider apparirà storto. le sue dimensioni dipendono direttamente dalle proporzioni dell'immagine.

Ora bisogna stilizzare il tutto, di solito gli stili non sono particolarmente commentati, ma ho deciso di concentrarmi su questo, così che non ci siano fraintendimenti in futuro.

body ( margin: 0; padding: 0; ) #block-for-slider ( width: 800px; margin: 0 auto; margin-top: 100px; ) #viewport ( width: 100%; display: table; position: relativo; overflow: nascosto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; ) #slidewrapper ( posizione: relativa; larghezza: calc(100% * 4); in alto: 0; sinistra: 0; margine: 0; padding: 0; -transizione-webkit: 1s; -o-transizione: 1s; transizione: 1s; -webkit -funzione-tempo-transizione: facilità-in-uscita; -o-funzione-tempo-transizione: facilità-in-uscita; funzione-tempo-transizione: facilità-in-uscita; ) #slidewrapper ul, #slidewrapper li ( margin : 0; riempimento: 0; ) #slidewrapper li ( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )

Iniziamo con blocco per cursore, ripeto, questo è il nostro blocco sulla pagina, che assegneremo sotto lo slider, la sua altezza dipenderà dalla sua larghezza e dalle proporzioni della nostra immagine, perché vista occupa l'intera larghezza blocco per cursore, poi se stesso vetrino ha la stessa larghezza e, di conseguenza, l'immagine al suo interno cambia la sua altezza a seconda della larghezza (le proporzioni vengono mantenute). Ho posizionato questo elemento sulla mia pagina orizzontalmente al centro, 100px rientrato dall'alto, rendendo la sua posizione più comoda per l'esempio.

Elemento vista, come già accennato, occupa l'intera larghezza della ns blocco per cursore, ha la proprietà troppopieno: nascosto, ci consentirà di nascondere il nostro feed di immagini che va oltre il viewport.


Seguente proprietà css - user-select:none, consente di eliminare l'evidenziazione blu dei singoli elementi del dispositivo di scorrimento con più clic sui pulsanti.

Passiamo a involucro di diapositive perché posizione: relativa, ma no assoluto? Tutto è molto semplice, perché. se scegliamo la seconda opzione, allora con la proprietà overflow viewport:nascosto niente ci sembrerà, tk. io stesso vista non si adatterà all'altezza involucro di diapositive, per cui avrà altezza: 0. Perché la larghezza è importante e perché la impostiamo? Il punto è che le nostre diapositive avranno una larghezza uguale a 100% della vista e per disporli in linea, abbiamo bisogno di un posto dove staranno, quindi la larghezza involucro di diapositive dovrebbe essere uguale Larghezza della finestra del 100%. moltiplicato per il numero di diapositive (4 nel mio caso). Riguardo transizione e funzione di temporizzazione di transizione, quindi qui 1s significa quel cambio di posizione involucro di diapositive accadrà entro 1 secondo e lo osserveremo, e facilità d'ingresso- un tipo di animazione in cui all'inizio va lentamente, accelera al centro e poi rallenta di nuovo, qui puoi già impostare i valori da solo.

Il prossimo blocco di insiemi di proprietà involucro di diapositive e i suoi elementi figlio sono a riempimento zero, i commenti sono superflui qui.

Successivamente, modelleremo le nostre diapositive, la loro larghezza dovrebbe essere uguale alla larghezza vista, ma perché loro sono dentro involucro di diapositive, la cui larghezza è uguale alla larghezza della finestra moltiplicata per il numero di diapositive, quindi per ottenere la larghezza vista ancora una volta, abbiamo bisogno del 100% della larghezza involucro di diapositive dividere per il numero di diapositive (nel mio caso, ancora, per 4). Dopo averli trasformati in elementi in linea con display: in linea e imposta l'avvolgimento a sinistra aggiungendo la proprietà galleggiante: sinistra. Pro stile elenco: nessuno Posso dire che lo uso per rimuovere l'indicatore predefinito da li, nella maggior parte dei casi è una specie di standard.

Così diapositiva-imgè semplice, l'immagine occuperà l'intera larghezza vetrino, vetrino regolare alla sua altezza involucro di diapositive regolare all'altezza vetrino, e l'altezza vista a sua volta assumerà il valore dell'altezza involucro di diapositive, quindi l'altezza del nostro slider dipenderà dalle proporzioni dell'immagine e dalla dimensione del blocco previsto per lo slider, di cui ho già parlato sopra.

Penso che abbiamo capito gli stili su questo, per ora faremo una semplice presentazione senza pulsanti e dopo esserci assicurati che funzioni correttamente, li aggiungeremo e li modelleremo.

Apriamo il nostro file js, che conterrà il codice del dispositivo di scorrimento, non dimenticare di includere jQuery, perché scriveremo usando questo framework. A proposito, al momento in cui scrivo, uso la versione jQuery 3.1.0. Il file stesso con lo script deve essere incluso alla fine del tag corpo, perché lavoreremo con elementi DOM che devono essere inizializzati prima.

Per ora, dobbiamo dichiarare un paio di variabili, una memorizzerà il numero della diapositiva che vediamo in un certo momento durante vista l'ho chiamata slideNow e il secondo memorizzerà il numero di queste stesse diapositive, questo Conteggio diapositive.

var slideNow = 1; var slideCount = $("#slidewrapper").bambini().lunghezza);

variabile slideNowè necessario impostare il valore iniziale a 1, perché quando la pagina viene caricata, in base al nostro markup, vedremo la prima diapositiva vista.

A Conteggio diapositive metteremo il numero di bambini involucro di diapositive, qui è tutto logico.
Successivamente, devi creare una funzione che sarà responsabile del passaggio delle diapositive da destra a sinistra, diciamolo:

funzione diapositiva successiva() ( )

Lo chiameremo nel blocco principale del nostro codice, a cui arriveremo, ma per ora diremo alla nostra funzione cosa deve fare:

function nextSlide() ( if (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * ( slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0 )", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )

Innanzitutto, controlliamo se siamo attualmente sull'ultima diapositiva del nostro feed? Per fare ciò, prendiamo il numero di tutte le nostre diapositive utilizzate $("#slidewrapper").bambini().lunghezza e confrontalo con il numero della nostra diapositiva, se sono uguali, significa che dobbiamo ricominciare a mostrare il nastro, da 1 diapositiva, il che significa che cambiamo trasforma la proprietà CSS A involucro di diapositive sul traduci(0, 0), spostandolo così nella sua posizione originale in modo che la prima diapositiva sia nel nostro campo visivo, non dimentichiamoci anche di --webkit e --ms per un'adeguata visualizzazione cross-browser (vedi riferimento alla proprietà CSS). Dopodiché, non dimenticare di aggiornare il valore della variabile slideNow, informandola che è in vista la diapositiva numero 1: slideNow = 1;

La stessa condizione include il controllo che il numero della diapositiva che vediamo rientri nel numero delle nostre diapositive, ma se in qualche modo ciò non viene fatto, torneremo nuovamente alla prima diapositiva.

Se la prima condizione non è soddisfatta, significa che al momento non siamo né sull'ultima diapositiva, né su una inesistente, il che significa che dobbiamo passare alla successiva, lo faremo spostando involucro di diapositive lasciato da un valore uguale alla larghezza vista, il passaggio avverrà nuovamente tramite l'immobile di famiglia tradurre, il cui valore sarà uguale a "translate(" + translateWidth + "px, 0)", dove translateWidthè la distanza che il nostro involucro di diapositive. A proposito, dichiariamo questa variabile all'inizio del nostro codice:

var translateWidth = 0;

Dopo essere passati alla diapositiva successiva, diciamo alla nostra diapositiva Ora che vediamo la diapositiva successiva di seguito: slideNow++;

A questo punto, alcuni lettori potrebbero chiedersi perché non abbiamo sostituito $("#vista").larghezza() ad una variabile, per esempio Larghezza diapositiva avere sempre a portata di mano la larghezza della nostra diapositiva? La risposta è molto semplice, se il nostro sito è adattivo, di conseguenza, anche il blocco assegnato allo slider è adattivo, in base a ciò, possiamo capire che quando si ridimensiona la larghezza della finestra senza ricaricare la pagina (ad esempio, girando il telefono su un lato), la larghezza vista cambierà e, di conseguenza, cambierà la larghezza di una diapositiva. In tal caso, il ns involucro di diapositive verrà spostato al valore della larghezza che era originariamente, il che significa che le immagini verranno visualizzate in parti o non visualizzate affatto in vista. Scrivere nella nostra funzione $("#vista").larghezza() invece di Larghezza diapositiva facciamo calcolare la larghezza ogni volta che cambi diapositiva vista, fornendo così, con un netto cambiamento nella larghezza dello schermo, lo scorrimento fino alla diapositiva di cui abbiamo bisogno.

Tuttavia, abbiamo scritto la funzione, ora dobbiamo chiamarla dopo un certo intervallo di tempo, possiamo anche memorizzare l'intervallo in una variabile, in modo che se vogliamo cambiarlo, cambia solo un valore nel codice:

var slideInterval = 2000;

Il tempo in js è specificato in millisecondi.

Ora scriviamo la seguente struttura:

$(documento).ready(funzione() ( setInterval(nextSlide, slideInterval); ));

Tutto non è da nessuna parte più facile, siamo attraverso il design $(documento).pronto(funzione()()) diciamo che le seguenti azioni devono essere eseguite dopo che il documento è stato completamente caricato. Successivamente, chiamiamo semplicemente la funzione prossima diapositiva con un intervallo uguale a slideInterval, utilizzando la funzione incorporata setInterval.

Dopo tutti i passaggi che abbiamo eseguito sopra, il nostro dispositivo di scorrimento dovrebbe girare perfettamente, ma se qualcosa è andato storto con te, il problema potrebbe essere nella versione jQuery o nella connessione errata di qualsiasi file. Inoltre, non è necessario escludere che potresti commettere un errore da qualche parte nel codice, quindi posso solo consigliarti di ricontrollare tutto.


Nel frattempo, andiamo avanti, aggiungiamo al nostro slider una funzione come fermare lo scorrimento al passaggio del mouse, per questo dobbiamo scrivere nel blocco principale di codice (all'interno del costrutto $(document).ready(function() ())) una cosa del genere:

$("#viewport").hover(function()( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Per iniziare ad analizzare questo codice, dobbiamo sapere di cosa si tratta switchInterval. In primo luogo, questa è una variabile che memorizza una chiamata periodica alla funzione nextSlide, in poche parole, abbiamo questa riga di codice: setInterval(nextSlide, slideInterval);, si è trasformato in questo: switchInterval = setInterval(nextSlide, slideInterval);. Dopo queste manipolazioni, il nostro blocco principale di codice ha assunto la forma seguente:

$(document).ready(function() ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function()( clearInterval(switchInterval); ),function() ( switchInterval = setInterval( nextSlide, slideInterval); )); ));

Qui sto usando event librarsi, che significa "in bilico", questo evento consente di tenere traccia del momento in cui passo il mouse su un oggetto, in questo caso su vista.

Dopo aver bilico, azzero l'intervallo che indicherò tra parentesi (questo è il nostro switchInterval), quindi, separato da virgole, scrivo cosa farò quando sposterò indietro il cursore, in questo blocco assegno nuovamente al nostro switchInterval chiamata di funzione periodica prossima diapositiva.

Ora, se controlliamo, possiamo vedere come reagisce il nostro dispositivo di scorrimento al passaggio del mouse, impedendo il passaggio delle diapositive.

Quindi è il momento di aggiungere pulsanti al nostro dispositivo di scorrimento, iniziamo con i pulsanti avanti e indietro.

Segnaliamoli prima:

All'inizio, questo markup potrebbe essere incomprensibile, dirò subito che ho avvolto questi due pulsanti in uno div con classe precedente-successivo-btns solo per tua comodità, non puoi farlo, il risultato non cambierà, ora aggiungeremo stili e tutto diventerà chiaro:

#prev-btn, #next-btn ( posizione: assoluta; larghezza: 50px; altezza: 50px; colore di sfondo: #fff; raggio-bordo: 50%; alto: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( cursore: puntatore; ) #prev-btn (sinistra: 20px; ) #next-btn (destra: 20px; )

Per prima cosa posizioniamo i nostri pulsanti tramite posizione: assoluta, così controlleremo liberamente la loro posizione all'interno del nostro vista, quindi specificare le dimensioni di questi pulsanti e utilizzare raggio di confine intorno agli angoli in modo che questi pulsanti diventino dei cerchi. Il loro colore sarà bianco, cioè #F F F, e la loro rientranza dal bordo superiore vista sarà uguale alla metà dell'altezza di questo vista meno la metà dell'altezza del pulsante stesso (25px nel mio caso), quindi possiamo centrarli verticalmente. Successivamente, specificheremo che quando ci passi sopra, il nostro cursore cambierà in puntatore e infine, diciamo ai nostri pulsanti individualmente che dovrebbero essere spostati indietro di 20px dai bordi in modo da poterli vedere come vogliamo.

Ancora una volta, puoi modellare gli elementi della pagina come preferisci, sto solo fornendo un esempio degli stili che ho deciso di utilizzare.

Dopo lo styling, il nostro dispositivo di scorrimento dovrebbe assomigliare a questo:


Successivamente, torniamo al ns file js, dove descriviamo come funzionano i nostri pulsanti. Bene, aggiungiamo un'altra funzione, ci mostrerà la diapositiva precedente:

funzione prevSlide() ( if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0 )", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; ) else ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px , 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow--; ) )

È chiamato precedenteSlide, verrà chiamato solo cliccando su precedente btn. Per prima cosa controlliamo se siamo sulla 1a diapositiva o meno, qui controlliamo anche se il nostro slideNow oltre i confini della reale portata delle nostre diapositive e, se una delle condizioni funziona, ci sposteremo all'ultima diapositiva, spostandoci involucro di diapositive al valore che vogliamo. Calcoleremo questo valore usando la formula: (larghezza di una diapositiva) * (numero di diapositive - 1), prendiamo tutto questo con un segno meno, perché spostandolo a sinistra, si scopre che vista ora ci mostrerà l'ultima diapositiva. Alla fine di questo blocco, dobbiamo anche dire alla variabile slideNow che ora abbiamo l'ultima diapositiva nel nostro campo visivo.

Se non siamo sulla prima diapositiva, dobbiamo tornare indietro di 1, per questo cambiamo nuovamente la proprietà trasformazione slidewrapper. La formula è: (larghezza di una diapositiva) * (numero della diapositiva corrente - 2), tutto questo, ancora, è preso con un segno meno. Ma perché -2, e non -1, dobbiamo spostare indietro la stessa diapositiva 1? Il fatto è che se siamo, diciamo, sulla seconda diapositiva, allora la variabile X proprietà trasformare:translate(x,0) nostro involucro di diapositiveè già uguale alla larghezza di una diapositiva, se gli diciamo che dobbiamo sottrarre 1 dal numero della diapositiva corrente, otterremo nuovamente l'unità di cui abbiamo già spostato involucro di diapositive, quindi dovrai spostare di 0 queste stesse larghezze vista, che significa su slideNow - 2.

Ora dobbiamo aggiungere queste righe al blocco di codice principale:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Qui teniamo semplicemente traccia se è stato fatto un clic sui nostri pulsanti, e in questo caso chiamiamo le funzioni di cui abbiamo bisogno, tutto è semplice e logico.

Ora aggiungiamo i pulsanti di navigazione delle diapositive, di nuovo al markup:

Come puoi vedere, dentro vistaè apparso un elenco annidato, assegnagli un identificatore nav-btns, dentro li- i nostri pulsanti di navigazione, assegneremo loro una classe slide-nav-btn, invece, puoi finire con il markup, passiamo agli stili:

#nav-btns ( posizione: assoluta; larghezza: 100%; parte inferiore: 20px; riempimento: 0; margine: 0; allineamento testo: centro; ) .slide-nav-btn ( posizione: relativa; display: inline-block; stile elenco: nessuno; larghezza: 20px; altezza: 20px; colore di sfondo: #fff; raggio-bordo: 50%; margine: 3px; ) .slide-nav-btn:hover ( cursore: puntatore; )

Blocco nav-btns, in cui si trovano i nostri pulsanti, diamo la proprietà posizione: assoluta in modo che non si allunghi vista di altezza, perché A involucro di diapositive proprietà posizione: relativa, impostiamo la larghezza su 100% in modo che con text-align:center pulsanti centrali orizzontalmente rispetto a vista, quindi utilizzando la proprietà metter il fondo a chiariamo al nostro blocco che dovrebbe trovarsi a una distanza di 20px dal bordo inferiore.

Con i pulsanti, facciamo la stessa cosa delle diapositive, ma ora glielo chiediamo display: blocco in linea, perché A display: in linea non rispondono larghezza e altezza, perché sono in un blocco assolutamente posizionato. Faremo il loro colore bianco e con l'aiuto di ciò che già ci è familiare raggio di confine Diamo loro una forma circolare. Passandoci sopra con il mouse, cambieremo l'aspetto del nostro cursore per la normale visualizzazione.

E ora scendiamo a jQuery - Parti:
Per prima cosa, dichiariamo la variabile navBtnId, che memorizzerà l'indice del pulsante su cui abbiamo fatto clic:

var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) ));

Eccoci qua quando clicchi sul nostro slide-nav-btn chiamare una funzione che prima assegna a una variabile navBtnId l'indice del pulsante cliccato, ovvero il suo numero di serie, poiché il conto alla rovescia parte da zero, quindi se clicchiamo sul secondo pulsante, quindi in navBtnId viene scritto il valore 1. Successivamente, eseguiamo un controllo, in cui aggiungiamo uno al numero ordinale del pulsante per ottenere un tale numero, come se il conto alla rovescia non fosse da 0, ma da 1, confrontiamo questo numero con il numero della diapositiva corrente, se corrispondono, non intraprenderemo alcuna azione, perché la diapositiva desiderata è già presente vista.

Se la diapositiva di cui abbiamo bisogno non è in vista vista, quindi calcoliamo la distanza di cui dobbiamo spostarci involucro di diapositive a sinistra, quindi modificare il valore le proprietà css si trasformano per tradurre(la stessa distanza in pixel, 0). Lo abbiamo già fatto più di una volta, quindi non dovrebbero sorgere domande. Alla fine, salviamo nuovamente il valore della diapositiva corrente in una variabile slideNow, questo valore può essere calcolato aggiungendone uno all'indice del pulsante cliccato.

Questo, in effetti, è tutto, se qualcosa non è chiaro, lascio un collegamento a jsfiddle, dove verrà fornito tutto il codice scritto nel materiale.

Grazie per l'attenzione!

tag:

• cursore jquery
• css
• animazione css3
• html

Aggiungere etichette