Lag en bildeglider med Jquery for et web

Vi skal lage en glidebryter utviklet med Jquery Y Nivo Slider, uten behov for et plugin og at vi kan tilpasse oss nettstedet vårt.

For å gjøre dette skal vi bruke Jquery rammeverk, hvilken er en bibliotek for å lette arbeidet med Javascript -språket. Vi laster ned biblioteket fra Jquery.com, det er også mulig at du kan bruke den ved å trekke googleapis.com bruker denne koden på html -siden din for å legge til dette skriptet.

Hvis du har lastet den ned fra Jquery -siden og lastet den opp til en katalog på nettstedet ditt, må du sette den til å peke på domenet ditt som følgende eksempel:

La oss laste ned nå Nivo glidebryter hva er Jquery -bibliotek som lar oss lage glidebryteren. Herfra kan du laste ned Nivo -glidebryteren gratis. Pakk ut filen i katalogen vår, her kan vi se strukturen på nettet.

Nå skal vi lage en index.html -fil for nettstedet vårt, i toppteksten vil vi legge til bibliotekene og stilarkene. Vi kan se Jquery -biblioteket, nivå -glidebryterbiblioteket og Nivo -glidebryterens egne stilark, så kan vi tilpasse dem.

Nå skal vi lage en beholder for bildene våre og glidebryteren, for dette og for å kunne vise den, ble den opprettet i samme index.html (Den kan også opprettes i en CSS -stilarkfil, som passer hver og en).
Vi starter med strukturen på nettet og selve glidebryteren, og setter inn bildene som skal vises og en melding.

Deretter aktiverer vi nivå Silder -pluginet og sender det parametere om typen effekt, tid mellom animasjon, pause mellom bilde og mange flere som kan sees i Nivo Slider -dokumentasjonen.

La oss observere at id er aktivert #silder den samme der jeg definerer bildene, så hvis jeg vil ha mer enn en glidebryter, må jeg replikere den samme strukturen og aktivere den for den tilsvarende IDen.
Resultatet av testing index.html i en nettleser er:

Her ser vi det andre lysbildet, nedenfor ser vi antall lysbilder 1 og 2, og standardkoblingene Forrige (forrige) Neste (neste) skal vi forbedre visningen av det ved hjelp av css.
Vi kan endre tallene til kuler ganske enkelt ved å se på nivå-silder.css

 .nivo-controlNav {tekstjustering: venstre; polstring: 0; posisjon: slektning; z-indeks: 10; } .nivo-controlNav til {display: inline-block; bredde: 10px; høyde: 10px; bakgrunn: url (bullets.png.webp) no-repeat; tekstinnrykk: -9999px; grense: 0; margin: 0 2px; } .nivo-controlNav a.active {bakgrunn-posisjon: 0 100%; } .nivo-directionNav til {display: block; bredde: 30px; høyde: 30px; bakgrunn: url (piler.png.webp) no-repeat; tekstinnrykk: -9999px; grense: 0; topp: auto; bunn: -36px; z-indeks: 11; } .nivo-directionNav a: sveve {bakgrunnsfarge: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; kant-radius: 2px; } a.nivo-nextNav {bakgrunn-posisjon: 160% 50%; høyre: 0px; } a.nivo-prevNav {bakgrunn-posisjon: -60% 50%; venstre: auto; høyre: 35px; } 

Resultatet av denne endringen vil være tallene som kuler til venstre og koblingene som piler til høyre.

Vi kommer til å utvide funksjonaliteten ved å vise en datablokk i et av lysbildene

Ved å endre koden som vi allerede har, endrer vi avsnittet i lysbilde 2 for en blokk som jeg vil ringe med en ID # blokk2, så oppretter jeg blokken og bruker en skjult stil slik at den bare er synlig når lysbilde 2 er aktivert.
Resultatet er som følger:

Du kan også sette miniatyrbilder. Et annet alternativ er å generere innholdet dynamisk fra en mysql og php eller bruke det i en CMS -mal som joomla eller wordpress. Den kommer med mange plugins som allerede er programmert, men med noen få kodelinjer kan vi lage vår egen komponent. Jeg håper det har tjent deg.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng