Skyder ved hjælp af js. Letvægts professionel javascript CSS3 skyder

Hvis du har brug for at tilføje en højkvalitets jQuery-billedskyder til dit websted, så finder du i denne artikel en beskrivelse af de nødvendige plugins. Selvom JQuery har gjort arbejdet med JavaScript meget lettere, har vi stadig brug for plugins for at fremskynde webdesignprocessen.

Vi kan foretage ændringer i nogle af disse plugins og skabe nye skydere, der er meget mere egnede til formålet med vores websted.

For andre skydere tilføjer du blot titler, billeder og vælger diasovergangseffekter, der følger med skyderen. Alle disse plugins er ledsaget af detaljeret dokumentation, så det vil ikke være svært at tilføje nye effekter eller funktioner til dem. Du kan endda ændre begivenhedsbaserede triggere, hvis du er en erfaren JQuery-programmør.

Seneste trends såsom responsivt design er meget vigtige for webprojekter, uanset om du implementerer et plugin eller et script. Alle disse elementer gør hvert af disse plugins meget fleksible. Alt, der udkom i 2014, er inkluderet i denne liste.

jQuery billedskydere

Jssor Responsive Slider

Jeg stødte for nylig på denne kraftfulde JQuery-skyder og var i stand til at se første hånd, at den gør sit arbejde meget godt. Den indeholder ubegrænsede muligheder, der kan udvides gennem skyderens åbne kildekode:

• Adaptivt design;
• Mere end 15 tilpasningsmuligheder;
• Mere end 15 billedændrende effekter;
• Billedgalleri, karrusel, understøttelse af fuld skærmstørrelse;
• Lodret bannerrotator, liste over dias;
• Video support.

Demo | Hent

PgwSlider - responsiv skyder baseret på JQuery / Zepto

Den eneste opgave med dette plugin er at vise dias af billeder. Det er meget kompakt, da JQuery-filerne kun er 2,5 KB store, hvilket gør det muligt at indlæse virkelig hurtigt:

• Adaptivt layout;
• SEO optimering;
• Understøttelse af forskellige browsere;
• Simple billedovergange;
• Arkivstørrelsen er kun 2,5 KB.

Demo | Hent

Jquery Vertical News Slider

En fleksibel og nyttig JQuery-skyder designet til nyhedsressourcer med en liste over publikationer i venstre side og et billede vist til højre:

• Adaptivt design;
• Lodret kolonne til at skifte nyheder;
• Udvidede overskrifter.

Demo | Hent

Wallop Slider

Denne skyder indeholder ikke jQuery, men jeg vil gerne præsentere den, da den er meget kompakt og kan reducere sidens indlæsningstid markant. Lad mig vide, hvis du kan lide det:

• Adaptivt layout;
• Enkelt design;
• Forskellige muligheder for at skifte rutsjebane;
• Minimal JavaScript-kode;
• Størrelsen er kun 3KB.

Demo | Hent

Flad polaroid galleri

Galleri i stil med dokumenter spredt på et bord med et fleksibelt layout og smukt design burde være interessant for mange af jer. Mere velegnet til tablets og store skærme:

• Adaptiv skyder;
• fladt design;
• Tilfældig diasændring;
• Fuld adgang til kildekoden.

Demo | Hent

A-Slider

Demo | Hent

HiSlider – HTML5, jQuery og WordPress billedskyder

HiSlider introducerede en ny gratis plugin JQuery-skyderen, hvormed du kan oprette en række billedgallerier med fantastiske overgange:

• Adaptiv skyder;
• Kræver ikke programmeringskendskab;
• Flere fantastiske skabeloner og skins;
• Smukke overgangseffekter;
• Support til forskellige platforme;
• Kompatibel med WordPress, Joomla, Drupal;
• Mulighed for at vise forskellige typer indhold: billeder, YouTube video og Vimeo-videoer;
• Fleksibel opsætning;
• Nyttige ekstra funktioner;
• Ubegrænset mængde indhold vist.

Demo |Download

Wow skyder

WOW Slider er en responsiv jQuery billedskyder med fantastiske visuelle effekter ( domino, rotere, sløre, vende og blinke, flyve ud, persienner) og professionelle skabeloner.

WOW Slider kommer med en installationsguide, der giver dig mulighed for at skabe fantastiske skydere på få sekunder uden at skulle forstå kode eller redigere billeder. Versioner af plugin til Joomla og WordPress er også tilgængelige for download:

• Fuldt lydhør;
• Understøtter alle browsere og alle typer enheder;
• Understøttelse af berøringsenheder;
• Nem installation på WordPress;
• Fleksibilitet i konfiguration;
• SEO-optimeret.

Demo |Download

Nivo Slider – gratis jQuery-plugin

Nivo Slider er kendt over hele verden som den smukkeste og mest brugervenlige billedskyder. Nivo Slider plugin er gratis og frigivet under MIT-licensen:

• Kræver JQuery 1.7 og nyere;
• Smukke overgangseffekter;
• Enkel og fleksibel at konfigurere;
• Kompakt og adaptiv;
• Open source;
• Kraftfuld og enkel;
• Flere forskellige skabeloner;
• Automatisk billedbeskæring.

Demo |Download

Simpel jQuery-skyder med teknisk dokumentation

Idéen er inspireret af Apples skydere, hvor flere små elementer kan flyve ud med forskellige animationseffekter. Udviklerne forsøgte at implementere dette koncept under hensyntagen minimumskrav til at skabe enkelt design en online butik, hvor de "flyvende" elementer repræsenterer forskellige kategorier:

• Adaptivt layout;
• Minimalistisk design;
• Forskellige drop-out og slide skiftende effekter.

Demo |Download

Fuld størrelse jQuery billedskyder

En meget simpel skyder, der optager 100 % af sidebredden og tilpasser sig skærmstørrelserne på mobile enheder. Det fungerer med CSS-overgange, og billeder "stables" sammen med ankre. Ankeret kan udskiftes eller fjernes, hvis du ikke ønsker at vedhæfte et link til billedet.

Når den er installeret, udvides skyderen til 100 % af skærmens bredde. Det kan også automatisk reducere størrelsen af ​​diasbilleder:

• Adaptiv JQuery-skyder;
• Fuld størrelse;
• Minimalistisk design.

Demo |Download

Elastisk indholdsskyder + tutorial

Elastic Content Slider justerer automatisk bredden og højden baseret på dimensionerne af det overordnede element. Dette er en simpel jQuery-skyder. Den består af et slideområde øverst og en navigationsfanelinje nederst. Skyderen justerer dens bredde og højde i henhold til dimensionerne af den overordnede beholder.

Når de ses på små diagonale skærme, bliver navigationsfanerne til små ikoner:

• Adaptivt design;
• Rulning med museklik.

Demo |Download

Gratis 3D Stack Slider

En eksperimentel skyder, der ruller gennem billeder i 3D. De to stakke minder om stakke af papir, hvorfra der, når de rulles, vises billeder i midten af ​​skyderen:

• Adaptivt design;
• Flip - overgang;
• 3D effekter.

Demo |Download

Fuldskærms Slid Slider baseret på JQuery og CSS3 + tutorial

Denne vejledning viser dig, hvordan du opretter en skyder med et twist: Ideen er at "klippe" og vise det aktuelle dias, når du åbner det næste eller forrige billede. Ved at bruge JQuery og CSS-animation kan vi skabe unikke overgangseffekter:

• Adaptivt design;
• Split overgang;
• Fuldskærmsskyder.

Demo |Download

Unislider - en meget lille jQuery-skyder

Ingen unødvendige klokker og fløjter, mindre end 3 KB i størrelse. Brug en hvilken som helst HTML-kode til dine slides, udvid den med ved hjælp af CSS. Alt relateret til Unslider er hostet på GitHub:

• Understøttelse af forskellige browsere;
• Tastaturunderstøttelse;
• Højdejustering;
• Adaptivt design;
• Touch input support.

Demo | Hent

Minimal responsive slides

Enkelt og kompakt plugin ( størrelsen er kun 1 KB), som skaber adaptiv skyder ved hjælp af elementerne inde i beholderen. ResponsiveSLides.js arbejder med stort beløb browsere, inklusive alle versioner af IE fra IE6 og højere:

• Fuldt lydhør;
• Størrelse 1 KB;
• CSS3-overgange med mulighed for at køre via JavaScript;
• Enkel opmærkning ved hjælp af punktopstillinger;
• Evne til at tilpasse overgangseffekter og visningsvarighed af et dias;
• Understøtter muligheden for at oprette flere diasshows;
• Automatisk og manuel rulning.

Demo |Download

Kamera - gratis jQuery-skyder

Kamera er et plugin med mange overgangseffekter og et responsivt layout. Nem at konfigurere, understøttet af mobile enheder:

• Fuldt responsivt design;
• Underskrifter;
• Mulighed for at tilføje videoer;
• 33 forskellige farveikoner.

Demo |Download

SlidesJS, responsivt jQuery-plugin

SlidesJS er et responsivt plugin til JQuery (1.7.1 og nyere) med understøttelse af touch-enheder og CSS3-overgange. Eksperimenter med det, prøv et par færdige eksempler, der hjælper dig med at finde ud af, hvordan du tilføjer SlidesJS til dit projekt:

• Adaptivt design;
• CSS3 overgange;
• Understøttelse af berøringsenheder;
• Nem at sætte op.

Demo | Hent

BX Jquery Slider

Dette er en gratis responsiv jQuery-skyder:

• Fuldt lydhør - tilpasser sig enhver enhed;
• Vandret, lodret glideskift;
• Slides kan indeholde billeder, videoer eller HTML-indhold;
• Udvidet understøttelse af berøringsenheder;
• Brug af CSS-overgange til diasanimation ( hardwareacceleration);
• Callback API og fuldt offentlige metoder;
• Lille filstørrelse;
• Let at implementere.

Demo |Download

FlexSlider 2

Den bedste responsive skyder. En ny version blev ændret for at øge hastigheden og kompaktheden.

Demo | Hent

Galleria - JavaScript-baseret responsivt fotogalleri

Galleria bruges på millioner af websteder til at skabe billedgallerier i høj kvalitet. Antallet af positive anmeldelser om hendes arbejde er simpelthen ude af hitlisterne:

• Helt gratis;
• Fuldskærmsvisningstilstand;
• 100% adaptiv;
• Ingen programmeringserfaring påkrævet;
• Understøttelse af iPhone, iPad og andre touch-enheder;
• Flickr, Vimeo, YouTube og mere;
• Flere emner.

Demo | Hent

Blueberry - en simpel responsiv jQuery-billedskyder

Jeg præsenterer dig for en jQuery-billedskyder skrevet specielt til responsivt webdesign. Blueberry er et eksperimentelt open source-billedskyder-plugin kildekode, som er skrevet specielt til at arbejde med responsive skabeloner:

• Minimalt design;
• Adaptivt layout;
• Præsentationer.

Demo | Hent

jQuery Popeye 2.1

Er brugt standard elementer første version af programmet: skyderen forsvinder til venstre og popper op til højre. De samme navigationselementer og billedtekster, som dukker op ved musen over:

• Adaptivt design;
• Signaturstøtte;
• Diasshow-tilstand.

Demo | Hent

Adaptivt, eller hvis du foretrækker det, responsivt webdesign er nu ikke blot endnu en designtrend, det er allerede en vis standard for hjemmesideudvikling, hvilket sikrer websitets alsidighed og harmonisk visuel opfattelse på skærmene på forskellige brugerenheder. Senere under udvikling adaptiv skabelon, måtte jeg stå over for forskellige vanskeligheder med at integrere visse skydere og billedgallerier uden at forstyrre den overordnede designstil. Nu er alt meget enklere, det findes på internettet stor mængde færdige løsninger og det, der er særligt glædeligt, er, at de fleste af dem er med fri adgang, open source.

På grund af de mange forskellige tilbudte værktøjer, kompilerede jeg kort anmeldelse mest bemærkelsesværdige udviklinger responsiv jQuery billedskydere, der er dukket op for nylig og distribueres uden nogen begrænsninger, dvs. helt gratis.

WOW skyder

Responsiv jQuery-billedskyder med et fantastisk sæt visuelle effekter (rotation, flyout, sløring, spiraler, persienner osv...) og mange færdige skabeloner. Med WOW Sliders indbyggede sideindsættelsesguide kan du nemt og ubesværet skabe fantastiske diasshows på få minutter. Udviklerens websted indeholder al den nødvendige dokumentation for opsætning og brug af plugin på russisk, samt fremragende live eksempler på, hvordan plugin fungerer. Kan også downloades separat Wordpress plugin og et modul til Joomla. Jeg er sikker på, at mange vil kunne lide denne vidunderlige skyder, både begyndere og erfarne webmastere.

HiSlider

HiSlider - HTML5, Jquery-skyder og billedgalleri, helt gratis plugin til personlig brug på websteder, der kører populære systemer - WordPress, Joomla, Drupal. Ved hjælp af dette enkle, men ganske funktionelle værktøj, kan du nemt skabe fantastiske og levende diasshows, spektakulære præsentationer og annonceringer af nye beskeder på siderne på dine hjemmesider. Adskillige færdiglavede skabeloner og skins til skyderen, fantastiske indholdsovergange (ændrings-) effekter, output af forskelligt multimedieindhold: videoer fra YouTube og Vimeo, fleksibel brugerdefinerede indstillinger etc...

Nivo Slider

Nivo Slider er en god gammel, velkendt af alle ved, en af ​​de smukkeste og mest brugervenlige billedskydere. JQuery Nivo Slider plugin er gratis at downloade og bruge og er licenseret under MIT-licensen. Der er også et separat plugin til WordPress, men det er desværre allerede betalt, og du skal betale $29 for én licens. Det er bedre at gøre lidt magi med WP-temafilerne og vedhæfte den gratis jQuery-version af Nivo Slider-pluginet til din blog, da der er masser af information om, hvordan du gør dette på internettet.
Med hensyn til funktionalitet er alt i orden med dette i perfekt orden. Brugt til arbejde jQuery bibliotek v1.7+, smukke overgangseffekter, enkle og meget fleksible indstillinger, adaptivt layout, automatisk billedbeskæring og meget mere.

Ideen med skyderen var inspireret af udviklerne, som er kendt for Apple-produkternes præsentationsstil, hvor flere små objekter (billeder) ændres ved at klikke på den valgte kategori med en simpel animationseffekt. Codrops stiller til din rådighed detaljeret lektion for at oprette denne skyder, fuldt layout af HTML-markering, sæt CSS regler og et eksekverbart jQuery-plugin, samt et vidunderligt live-eksempel på brug af skyderen.

Slidslider

Fuldskærmsbilledskyder ved hjælp af JQuery og CSS3 + detaljeret vejledning om integrering af pluginnet på webstedssider. Ideen er at opdele det åbne aktuelle dias med specifikt indhold, når du flytter til det næste eller forrige indhold. MED ved hjælp af JQuery Og CSS-animationer du kan skabe unikke overgange mellem dias. Responsivt skyderlayout sikrer, at det ser lige godt ud på tværs af skærme forskellige typer brugerenheder.

Elastisk indholdsskyder

En indholdsskyder, der automatisk justerer i bredde og højde afhængigt af størrelsen på den overordnede beholder, den er placeret i. Ganske enkel at implementere og fleksibel i indstillinger kører skyderen på JQuery, med navigation i bunden, når skærmstørrelsen ændres nedad, vises navigationen i form af ikoner. Meget detaljeret dokumentation (oprettelse tutorial) og levende eksempler på brug.

3D Stack Slider

En eksperimentel version af skyderen, der viser billeder med overgange fra 3D-planet. Billederne er opdelt i to vandrette stakke, ved hjælp af navigationspilene til at ændre og overføre hvert efterfølgende billede til visningstilstanden. Generelt ikke noget særligt, men selve ideen og udførelsesteknikken er ret interessant.

En meget enkel, 100 % responsiv og fuld skærm jQuery billedskyder. Skyderens betjening er baseret på CSS-overgange (overgangsegenskaben) i forbindelse med magien ved jQuery. Værdien for maks. bredde er som standard sat til 100 %, så størrelsen på billederne vil ændre sig afhængigt af ændringer i skærmstørrelsen. Der er ingen specielle animationseffekter eller dikkedarer i designet, alt er enkelt og skræddersyet til uafbrudt drift.

Minimal slides

Navnet taler for sig selv, dette er måske en af ​​de mest lette og minimalistiske jQuery billedskydere, jeg er stødt på (1kb plugin). ResponsiveSlides.js er et lille jQuery-plugin, der opretter et diasshow ved hjælp af elementer inde i en container. Arbejde med bredt udvalg browsere, inklusive alle versioner af IE - den berømte bremse på fremskridt, fra IE6 og højere. Værket bruger CSS3 overgange i forbindelse med javascript for pålidelighed. Enkelt layout ved hjælp af en uordnet liste, tilpasning af overgange og tidsintervaller, automatisk og manuel kontrol skifte dias, samt understøttelse af flere diasshow på én gang. Her er sådan en legende "baby".

Kamera

Camera er et gratis JQuery-plugin til at organisere diasshows på webstedssider, en let skyder med mange overgangseffekter, et 100% responsivt layout og meget enkle indstillinger. Passer perfekt på skærmene på alle brugerenheder (pc-skærme, tablets, smartphones og mobiltelefoner). Mulighed for at demonstrere indlejret video. Automatisk slideskift og manuel kontrol ved hjælp af knapper og miniatureblok. Et næsten komplet galleri af billeder i et kompakt design.

bxSlider jQuery

En anden ret simpel responsiv skyder i jQuery. Du kan placere ethvert indhold, video, billeder, tekst og andre elementer på dine dias. Udvidet support berøringsskærme. Brug af CSS-overgangsanimationer. En lang række forskellige variationer af diasshows og kompakte billedgallerier. Automatisk og manuel styring. Skift dias ved hjælp af knapper og ved at vælge thumbnails. Lille størrelse kildefil, meget let at konfigurere og implementere.

FlexSlider 2

FlexSlider 2 Opdateret version skyder af samme navn, med forbedret responshastighed, minifikation af scriptet og minimering af reflow/gentegning. Pluginnet inkluderer en grundlæggende skyder, slidekontrol med miniaturebilleder, indbyggede venstre-højre pile og en nederste navigationslinje i form af knapper. Evnen til at vise video i dias (vimeo), fleksible indstillinger (overgange, design, tidsinterval), fuldt tilpasset layout.

Galleria

Et velkendt og ret populært responsivt jQuery-plugin til at skabe billedgallerier og skydere i høj kvalitet. Skydergrænsefladen, takket være dens kontrolpanel, ligner visuelt en velkendt videoafspiller; plugin'et indeholder flere forskellige designtemaer. Understøtter indlejret video og billeder med populære tjenester: Flickr, Vimeo, YouTube og andre. Detaljeret dokumentation om opsætning og brug.

Blåbær

En enkel, uden dikkedarer gratis jQuery-billedskyder skrevet specielt til responsivt webdesign. Blueberry er et eksperimentelt open source jQuery-plugin. Minimalistisk design, ingen effekter, kun jævnt pop-up-billeder, der erstatter hinanden efter en vis periode. Alt er meget enkelt, installer, tilslut og gå...

jQuery popeye 2.1

En meget kompakt jQuery-billedskyder med Lightbox-elementer. Takket være din fleksible størrelser, er meget let indbygget i enhver beholder, i en enkelt indgang i form af miniaturebilleder, når du holder musemarkøren eller klikker på dem, aktiveres en lysboks med et forstørret billede og kontroller. Det er praktisk at placere en sådan skyder i sidepaneler for at præsentere produkter eller nyhedsmeddelelser. Perfekt løsning for websteder med en stor mængde information.

Sekvens

Gratis responsiv skyder med avancerede CSS3-overgange. Minimalistisk stil, 3 designtemaer, Hver ramme glider vandret, vises i midten, billedet går til venstre, signaturen til højre, miniaturebilleder er duplikeret i nederste højre hjørne. Sideinddeling af produktvisninger, der skal ses i hver ramme. Kontrollerne inkluderer også tilbage- og frem-knapper. Støtte fra alle moderne browsere.

Swipe

En meget enkel billedskyder både med hensyn til funktionalitet og indstillinger; blandt indstillingerne er der en ændring i hastigheden for at skifte dias, aktivering af den manuelle tilstand (kontrolknapper er aktiveret), kontinuerligt diasshow. Denne skyder har ret til at eksistere, og den tiltrak mig kun, fordi den eksisterer; jeg fandt ikke noget særligt interessant i denne udvikling, måske ledte jeg ikke godt efter det)))

Responsive Image Slider

Sådan en smuk, adaptiv billedskyder fra Vladimir Kudinov, kammerater. Et solidt, veldesignet instrument, der medfølger klare eksempler og detaljerede instruktioner til oprettelse, installation og brug. Adaptivt design, flotte knapper og grønne pile, alt er ganske pænt og roligt, uden tryk.

FractionSlider

Gratis JQuery skyder plugin med parallakse effekt til billeder og tekst dias. Slideanimationer har flere visningsværdier med fuld kontrol i hver timing og animationsindstilling. Evnen til at animere flere elementer på et dias på én gang. Du kan installere forskellige metoder animationer, dias, der falmer eller overgange fra en bestemt retning. Automatisk visning og manuel styring ved hjælp af navigationspile, der popper op, når du holder markøren over billedet. 10 typer slide-animationseffekter og meget mere...

Anmeldelsen viste sig at være ret omfattende, men ikke informativ nok på grund af det store antal produkter, der blev overvejet. Alle detaljer og detaljerede beskrivelser funktionalitet af dette eller hint plugin, kan du finde ud af det direkte på udviklernes sider. Jeg kan kun håbe, at jeg har gjort det lettere for nogen at finde det meget nødvendige værktøj til at skabe farverige billedskydere på siderne på deres hjemmesider.

Med al respekt, Andrew

Lad mig starte med at sige, at denne artikel blev skrevet for at tale om, hvordan man opretter en billedrulleskyder til websider. Denne artikel er på ingen måde lærerig, den tjener kun som et eksempel på, hvordan vores overvejelsesobjekt kan implementeres. Du kan bruge koden i denne artikel som en slags skabelon for lignende udviklinger; Jeg håber, at jeg vil være i stand til at formidle til læseren essensen af ​​det, jeg har skrevet, tilstrækkeligt detaljeret og på en tilgængelig måde.

Og nu til det punkt, for ikke så længe siden havde jeg brug for at installere en skyder på et websted, men efter at have søgt på internettet efter færdiglavede scripts, fandt jeg ikke noget nyttigt, fordi nogle virkede ikke som jeg havde brug for, mens andre slet ikke startede uden fejl i konsollen. Brug jQuery - plugins For en skyder virkede det for uinteressant for mig, fordi... Selvom dette vil løse problemet, vil jeg ikke have nogen forståelse for, hvordan denne mekanisme virker, og at bruge et plugin til kun en skyder er ikke særlig optimalt. Jeg havde heller ikke rigtig lyst til at forstå skæve manuskripter, så jeg besluttede at skrive mit eget manuskript til skyderen, som jeg selv ville markere efter behov.

Først skal vi tage stilling til logikken i selve skyderen og derefter fortsætte til implementering. På dette stadium er en klar forståelse af denne mekanismes funktion meget vigtig, for uden den kan vi ikke skrive kode, der fungerer præcis som vi vil have.

Vores hovedformål vil være viewport, det vil sige den blok, hvor vi vil se, hvordan vores billeder roterer, i den vil vi have slideindpakning, vil dette være vores blok, der indeholder alle billederne på én linje, og som vil ændre sin position inden for viewport.


Dernæst på siderne indeni viewport, lodret i midten, vil der være tilbage og frem knapper, når du klikker på dem vil vi også ændre placeringen af ​​vores slideindpakning forholdsvis viewport, hvilket forårsager effekten af ​​at rulle gennem billeder. Og endelig vil det sidste objekt være vores navigationsknapper placeret i bunden viewport.


Når vi klikker på dem, vil vi blot se på serienummeret på denne knap og flytte det til det dias, vi skal bruge, igen ved at skifte slideindpakning(skiftet vil ske gennem ændring transformere css-egenskaber, hvis værdi konstant vil blive beregnet).

Jeg tror, ​​at logikken i, hvordan det hele fungerer, burde være klar efter det, jeg har nævnt ovenfor, men hvis der alligevel opstår misforståelser et eller andet sted, så vil alt blive tydeligere i koden nedenfor, du skal bare have lidt tålmodighed.

Lad os nu skrive! Først og fremmest, lad os åbne vores indeksfil og skriv den markup, vi skal bruge der:

Som du kan se, er der ikke noget kompliceret, blok-for-skyder fungerer som blot den blok, hvori vores skyder vil blive placeret, indeni er den allerede viewport, som indeholder vores slideindpakning, aka indlejret liste, her li er dias, og img- billeder inde i dem. Vær opmærksom på, at alle billeder skal have samme størrelse eller mindst proportioner, ellers vil skyderen se skæv ud, fordi dens dimensioner afhænger direkte af billedets proportioner.

Nu skal vi stilisere det hele, som regel bliver stilarter ikke kommenteret særligt meget, men jeg besluttede mig for stadig at gøre opmærksom på dette, så der ikke ville være nogen misforståelser i fremtiden.

krop ( margin: 0; polstring: 0; ) #blok-til-skyder (bredde: 800px; margin: 0 auto; margin-top: 100px; ) #viewport (bredde: 100%; display: tabel; position: relativ; overløb: skjult; -webkit-bruger-vælg: ingen; -moz-bruger-vælg: ingen; -ms-bruger-vælg: ingen; -o-bruger-vælg: ingen; bruger-vælg: ingen; ) #slidewrapper ( position: relativ; bredde: beregnet(100% * 4); top: 0; venstre: 0; margin: 0; polstring: 0; -webkit-overgang: 1s; -o-overgang: 1s; overgang: 1s; -webkit -transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; ) #slidewrapper ul, #slidewrapper li ( margin : 0; polstring: 0; ) #slidewrapper li ( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )

Lad os starte med blok-for-skyder, dette, jeg gentager, er vores blok på siden, som vi vil allokere til skyderen; dens højde vil afhænge af dens bredde og proportionerne af vores billede, fordi viewport fylder hele bredden blok-for-skyder, så mig selv glide har samme bredde, og derfor ændrer billedet inde i det sin højde afhængigt af bredden (proportionerne opretholdes). Jeg placerede dette element på min side vandret i midten med 100px indrykket fra toppen, hvilket gjorde dets placering mere bekvemt for eksemplet.

Element viewport, som allerede nævnt, optager hele bredden af ​​vores blok-for-skyder, det har ejendommen overløb:skjult, vil det give os mulighed for at skjule vores billedfeed, som strækker sig ud over viewporten.


Følge css-egenskab - user-select:none, giver dig mulighed for at slippe af med blå fremhævning individuelle elementer skyder med adskillige klik på knapper.

Lad os gå videre til slideindpakning, hvorfor stilling: pårørende, men ikke absolut? Alt er meget enkelt, fordi... hvis vi vælger den anden mulighed, så med ejendommen viewport overflow:hidden Det vil virke som absolut ingenting for os, fordi... Mig selv viewport vil ikke tilpasse sig højden slideindpakning, på grund af hvilket det vil have højde: 0. Hvorfor betyder bredden noget, og hvorfor sætter vi den overhovedet? Faktum er, at vores dias vil have en bredde svarende til 100% fra viewport, og for at arrangere dem i en linje, har vi brug for et sted, hvor de vil stå, så bredden slideindpakning skal være lige 100 % visningsbredde, ganget med antallet af slides (i mit tilfælde med 4). Vedrørende overgang Og overgang-timing-funktion, så her 1s betyder, at en ændring er en stillingsændring slideindpakning vil ske inden for 1 sekund, og vi vil observere det, og let ind-ud– en type animation, hvor den starter langsomt, accelererer til midten og derefter sænker farten igen; her kan du indstille værdierne efter eget skøn.

Den næste blok af egenskaber specificerer slideindpakning og dens underordnede elementer har ingen polstring, ingen kommentarer her.

Dernæst styler vi vores dias, deres bredde skal være lig med bredden viewport, men fordi De er inde slideindpakning, hvis bredde er lig med bredden af ​​visningsporten ganget med antallet af dias, derefter for at få bredden viewport igen, vi har brug for 100% af bredden slideindpakning dividere med antallet af slides (i mit tilfælde igen med 4). Så forvandler vi dem til inline elementer med hjælp display:inline og indstil flowet til venstre ved at tilføje egenskaben flyde: venstre. Om liste-stil: ingen Jeg kan sige, at jeg bruger den til at fjerne standardmarkøren fra li, er i de fleste tilfælde en slags standard.

Co slide-img Det er enkelt, billedet fylder hele bredden glide, glide tilpasse sig dens højde, slideindpakning justere til højden glide, og højden viewport vil igen tage højdeværdien slideindpakning, således vil højden af ​​vores skyder afhænge af proportionerne af billedet og størrelsen af ​​den blok, der er tilvejebragt for skyderen, som jeg allerede skrev om ovenfor.

Jeg tror på dette tidspunkt, at vi har fundet ud af stilene, lad os lave et simpelt diasshow uden knapper indtil videre, og efter at vi har sikret os, at det fungerer korrekt, tilføjer og styles vi dem.

Lad os åbne vores js fil, som vil indeholde skyderkoden, glem ikke at oprette forbindelse jQuery, fordi Vi vil skrive ved hjælp af denne ramme. Forresten, på tidspunktet for skrivning af denne artikel, bruger jeg versionen jQuery 3.1.0. Filen med selve scriptet skal være inkluderet i slutningen af ​​tagget legeme, fordi vi vil arbejde med DOM-elementer, der skal initialiseres først.

For nu er vi nødt til at erklære et par variable, den ene vil gemme nummeret på det dias, vi ser i bestemt øjeblik tid ind viewport, jeg kaldte hende slideNu, og den anden vil gemme antallet af de samme slides, dette slideCount.

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

Variabel slideNu det er nødvendigt at indstille startværdien 1, fordi når siden indlæses, baseret på vores opmærkning, vil vi se det første slide ind viewport.

I slideCount vi vil sætte antallet af børn slideindpakning, alt er logisk her.
Dernæst skal du oprette en funktion, der vil være ansvarlig for at skifte dias fra højre til venstre, lad os erklære det:

funktion nextSlide() ( )

Vi vil kalde det i hovedblokken af ​​vores kode, som vi kommer til senere, men for nu vil vi fortælle vores funktion, hvad den skal gøre:

funktion 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++; ) )

Først tjekker vi, om vi i øjeblikket er på det sidste slide af vores feed? For at gøre dette tager vi antallet af alle vores slides ved hjælp af $("#slidewrapper").children().length og tjek det med nummeret på vores slide, hvis de viser sig at være ens, så betyder det at vi skal begynde at vise feedet igen fra slide 1, hvilket betyder at vi skifter transformere css-egenskab på slideindpakning på oversæt(0, 0), og dermed flytte den til sin oprindelige position, så den første dias vises i vores synsfelt, lad os heller ikke glemme alt om –webkit og –ms for tilstrækkelig visning på tværs af browsere (se. css egenskaber reference). Efter dette, glem ikke at opdatere værdien af ​​variablen slideNu, og fortæller hende, at dias nummer 1 er i udsigt: slideNow = 1;

Den samme betingelse inkluderer at kontrollere, at nummeret på det slide, vi ser, er inden for antallet af vores slides, men hvis dette på en eller anden måde ikke er opfyldt, så vender vi tilbage til 1. slide igen.

Hvis den første betingelse ikke er opfyldt, så indikerer dette, at vi i øjeblikket hverken er på det sidste slide eller på et ikke-eksisterende, hvilket betyder, at vi skal skifte til det næste, vi vil gøre dette ved at skifte slideindpakning til venstre med en værdi lig med bredden viewport, vil forskydningen igen ske gennem den velkendte egenskab Oversætte, hvis værdi vil være ens "translate(" + translateWidth + "px, 0)", Hvor oversætBredde– den afstand, hvormed vores slideindpakning. Lad os forresten erklære denne variabel i begyndelsen af ​​vores kode:

var translateWidth = 0;

Efter at have flyttet til næste slide, lad os fortælle vores slideNu hvor vi ser det næste slide: slideNow++;

På dette tidspunkt kan nogle læsere undre sig over, hvorfor vi ikke erstattede $("#viewport").width() til en eller anden variabel, for eksempel slideWidth altid at have bredden af ​​vores rutsjebane ved hånden? Svaret er meget enkelt, hvis vores websted er adaptivt, så er den blok, der er allokeret til skyderen, også adaptiv, baseret på dette kan vi forstå, at når du ændrer størrelsen på vinduets bredde uden at genindlæse siden (f.eks. telefonen på siden), bredden viewportændres, og derfor ændres bredden af ​​et dias. I dette tilfælde vores slideindpakning vil blive flyttet til værdien af ​​bredden, der oprindeligt var, hvilket betyder, at billederne vil blive vist i dele eller slet ikke vises i viewport. Ved at skrive i vores funktion $("#viewport").width() i stedet for slideWidth vi tvinger den til at beregne bredden, hver gang vi skifter dias viewport, og derved sikre, at når skærmbredden ændrer sig kraftigt, kan vi scrolle til det slide, vi skal bruge.

Vi har dog skrevet en funktion, nu skal vi kalde den efter et bestemt tidsinterval, vi kan også gemme intervallet i en variabel, så hvis vi vil ændre det, kan vi kun ændre én værdi i koden:

var slideInterval = 2000;

Tid i js er angivet i millisekunder.

Lad os nu skrive følgende konstruktion:

$(document).ready(function () (setInterval(nextSlide, slideInterval); ));

Alt kunne ikke være enklere her, vi gennemgår designet $(document).ready(funktion () ()) Vi siger, at følgende handlinger skal udføres, efter at dokumentet er blevet fuldt indlæst. Dernæst kalder vi blot funktionen næste Slide med et interval lig med slideInterval, ved hjælp af den indbyggede funktion sætinterval.

Efter alle de handlinger, vi udførte ovenfor, skulle vores skyder dreje perfekt, men hvis noget gik galt for dig, så kan problemet være enten i versionen jQuery, enten i forkert forbindelse nogen filer. Der er heller ingen grund til at udelukke, at du kunne have lavet en fejl et sted i koden, så jeg kan kun råde dig til at dobbelttjekke alt.


I mellemtiden, lad os gå videre, føj en funktion til vores skyder, såsom at stoppe med at rulle, når du holder markøren, for dette skal vi skrive i hovedblokken med kode (inde i $(dokument).ready(funktion () ()) konstruktion denne ting:

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

For at begynde at analysere denne kode, skal vi vide, hvad der er switchInterval. For det første er dette en variabel, der gemmer det periodiske kald til nextSlide-funktionen, ganske enkelt sagt, vi har denne kodelinje: setInterval(nextSlide, slideInterval);, blev til dette: switchInterval = setInterval(nextSlide, slideInterval);. Efter disse manipulationer tog vores hovedblok kode følgende form:

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

Her bruger jeg event svæve, hvilket betyder "på svæve", denne hændelse giver mig mulighed for at spore det øjeblik, hvor jeg svæver over et objekt, i I dette tilfælde på viewport.

Efter at have svævet rydder jeg intervallet, som jeg angiver i parentes (dette er vores switchInterval), så, adskilt af kommaer, skriver jeg, hvad jeg vil gøre, når jeg flytter markøren tilbage, i denne blok tildeler jeg igen til vores switchInterval periodisk funktionskald næste Slide.

Nu, hvis vi tester, kan vi se, hvordan vores skyder reagerer på at svæve, hvilket forhindrer diasset i at skifte.

Nu er det tid til at tilføje knapper til vores skyder, lad os starte med frem- og tilbageknapperne.

Først og fremmest, lad os markere dem:

I starten kan denne markering være uforståelig, men jeg vil straks sige, at jeg pakkede disse to knapper ind i én div med klasse forrige-næste-btns Bare for din bekvemmelighed behøver du ikke at gøre dette, resultatet vil ikke ændre sig, nu vil vi tilføje stilarter til dem, og alt bliver klart:

#prev-btn, #next-btn (position: absolut; bredde: 50px; højde: 50px; baggrundsfarve: #fff; border-radius: 50%; top: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( cursor: pointer; ) #prev-btn (venstre: 20px; ) #next-btn (højre: 20px;)

Først placerer vi vores knapper via position: absolut, derved vil vi frit kontrollere deres position inden for vores viewport, så angiver vi størrelserne på disse knapper og vha grænse-radius Lad os runde hjørnerne, så disse knapper bliver til cirkler. Deres farve vil være hvid, det vil sige #fff, og deres afstand fra den øverste kant viewport vil være lig med halvdelen af ​​højden af ​​denne viewport minus halvdelen af ​​selve knappens højde (i mit tilfælde 25px), på denne måde kan vi placere dem lodret i midten. Dernæst vil vi angive, at når vi holder musemarkøren over dem, vil vores markør skifte til pointer og endelig, lad os fortælle vores knapper individuelt, at de skal sættes 20px tilbage fra deres kanter, så vi kan se dem på en måde, der passer os.

Igen kan du style sideelementerne, som du vil, jeg giver bare et eksempel på de stilarter, som jeg besluttede at bruge.

Efter styling skulle vores skyder se sådan ud:


Dernæst går vi tilbage til vores js fil, hvor vi beskriver betjeningen af ​​vores knapper. Nå, lad os tilføje en funktion mere, den vil vise os det forrige dias:

funktion 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--;))

Det kaldes prevSlide, vil den kun blive kaldt, når du klikker på forrige-btn. Først tjekker vi om vi er på 1. slide eller ej, her tjekker vi også om vores slideNu ud over den faktiske rækkevidde af vores dias, og hvis nogen af ​​betingelserne udløses, vil vi flytte til det sidste dias, skiftende slideindpakning til den værdi, vi har brug for. Vi vil beregne denne værdi ved hjælp af formlen: (bredde af et dias) * (antal dias - 1), vi tager alt dette med et minustegn, fordi vi flytter den til venstre, viser det sig at viewport vil nu vise os det sidste dias. I slutningen af ​​denne blok skal vi også fortælle variablen slideNu at det sidste dias nu er i vores synsfelt.

Hvis vi ikke er på den første rutsjebane, så skal vi flytte 1 tilbage, for dette ændrer vi igen ejendommen transformer til slidewrapper. Formlen er: (bredden af ​​et dias) * (nummeret på det aktuelle dias - 2), igen tager vi alt dette med et minustegn. Men hvorfor -2, og ikke -1, skal vi kun flytte 1 slide tilbage? Faktum er, at hvis vi f.eks. er på 2. slide, så er variablen x ejendomme transform:translate(x,0) vores slideindpakning er allerede lig med bredden af ​​et dias, hvis vi fortæller ham, at vi skal trække 1 fra tallet på det aktuelle dias, får vi igen en, som vi allerede har flyttet med slideindpakning, så du bliver nødt til at flytte de samme bredder til 0 viewport, hvilket betyder på slideNow - 2.

Nu skal vi bare tilføje disse linjer til hovedblokken med kode:

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

Her sporer vi blot, om der blev klikket på vores knapper, og i dette tilfælde kalder vi de funktioner, vi har brug for, alt er enkelt og logisk.

Lad os nu tilføje diasnavigationsknapper og vende tilbage til markeringen igen:

Som du kan se, indeni viewport en indlejret liste er dukket op, lad os give den en identifikator nav-btns, inde i den li- vores navigationsknapper, vi tildeler dem en klasse slide-nav-btn, men vi kan afslutte med markeringen, lad os gå videre til stilene:

#nav-btns ( position: absolut; width: 100%; bund: 20px; polstring: 0; margin: 0; text-align: center; ) .slide-nav-btn ( position: relativ; display: inline-block; listestil: ingen; bredde: 20px; højde: 20px; baggrundsfarve: #fff; kant-radius: 50%; margin: 3px; ) .slide-nav-btn:hover ( cursor: pointer; )

Blok nav-btns, hvori vores knapper er placeret, giver vi ejendommen position: absolut, så den ikke strækker sig viewport i højden, fordi på slideindpakning ejendom stilling: pårørende, sætter vi bredden til 100 %, så vha text-align:center centrere knapperne vandret i forhold til viewport, og derefter bruge ejendommen bund Vi lader vores blok vide, at den skal være 20px fra den nederste kant.

Med knapper gør vi det samme som med slides, men nu giver vi dem display:inline-blok, fordi på display:inline de reagerer ikke på bredde Og højde, fordi er i en absolut placeret blok. Lad os gøre dem hvide og bruge det, vi allerede ved grænse-radius Lad os give dem form som en cirkel. Når vi holder markøren over dem, ændrer vi udseendet af vores markør til den sædvanlige visning.

Lad os nu komme i gang jQuery - dele:
Lad os først erklære en variabel navBtnId, som gemmer indekset for den knap, vi klikkede på:

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; ) );

Her er vi, når du klikker på vores slide-nav-btn kalder en funktion, der først tildeler til en variabel navBtnId indekset for den klikkede knap, det vil sige dens serienummer, da nedtællingen starter fra nul, så hvis vi klikker på den anden knap, så navBtnId værdien 1 registreres. Dernæst foretager vi en kontrol, hvor vi tilføjer en til serienummeret på knappen for at få et tal, som om nedtællingen ikke startede fra 0, men fra 1, sammenligner vi dette tal med antallet af nuværende slide, hvis de matcher, vil vi ikke foretage os nogen handling, da det påkrævede slide allerede er inde viewport.

Hvis den rutsjebane, vi skal bruge, ikke er i syne viewport, så beregner vi den afstand, vi skal bevæge os med slideindpakning til venstre, og skift derefter værdien transformere css-egenskaber for at oversætte(samme afstand i pixels, 0). Vi har allerede gjort dette mere end én gang, så der burde ikke være nogen spørgsmål. Til sidst gemmer vi igen værdien af ​​det aktuelle dias i en variabel slideNu, kan denne værdi beregnes ved at tilføje en til indekset for den klikkede knap.

Det er alt, faktisk, hvis noget ikke er klart, så vil jeg efterlade et link til jsfiddle, hvor al koden skrevet i materialet vil blive leveret.

Tak for din opmærksomhed!

Tags:

• jquery-skyderen
• css
• css3 animation
• html

Tilføj tags

For noget tid siden begyndte jeg at lære jQuery. Jeg tror, ​​at alle ved, at dette er navnet på det mest populære bibliotek til udvikling og oprettelse af scripts i JavaScript. Med dens hjælp er det meget nemt at skabe spektakulære og interaktive elementer websted.

I denne artikel vil jeg fortælle dig, hvordan du opretter en simpel universel skyder med ved hjælp af jQuery. Faktisk findes der et meget stort antal forskellige færdige sliders på internettet, som nogle gange ser meget fristende ud og er ret funktionelle, men vi laver det fra bunden.

Så hvilke funktioner i vores jQuery-skyder (som jeg kaldte HWSlider) kan noteres?

• Brugervenlighed og design - Jeg ville lave et simpelt script uden klokker og fløjter, så jeg brugte ikke CSS3-animationer, og koden viste sig at være meget alsidig og forståelig.
• Muligheden for at indsætte både billeder og enhver HTML-kode i dias.
• Mulighed for at rulle gennem dias både i rækkefølge (frem - tilbage) og vælge hvert dias (1,2,3,4...)
• Automatisk genererede links (forrige - næste, og med diasnumre). Du skal blot indsætte det nødvendige antal divs, og alt andet vil blive beregnet af sig selv. Nå, det kan bemærkes, at antallet af dias er ubegrænset.

Scriptet er kompatibelt med alle moderne browsere: IE, Opera, Firefox, Safari, Chrome (da skyderen ikke bruger CSS3).

Lad os starte med HTML-markering. Til det rigtige sted html sider eller skabelon skal indsættes.

Alt er enkelt her, som du kan se, kan du indsætte så mange slides, du vil, ved at oprette nye div'er. Alt kan indsættes i dem. html kode, for eksempel et billede eller en tekstblok. Bare glem ikke at inkludere selve jQuery-biblioteket sammen med alle js-scripts. Hvis du ikke ved hvordan, så se på eksemplet.

#slider-wrap( /* Wrapper til skyderen og knapper */ width:660px; ) #slider( /* Wrapper til skyderen */ width:640px; højde:360px; overløb: skjult; border:#eee solid 10px; position:relative; ) .slide( /* Slide */ width:100%; height:100%; ) .sli-links( /* Knapper til at ændre slides */ margin-top:10px; text-align:center;) .sli-links . control-slide( margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no- gentag;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( background-position:center top;) #prewbutton, #nextbutton ( /* Link "Næste" og "Forrige" */ display:blok; width:15px; højde:100%; position:absolut; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg .png) venstre center no-repeat; opacitet:0.8; z-indeks:3; outline:ingen !vigtigt;) #prewbutton(left:10px;) #nextbutton( right:10px; background:url(arrowBg.png) right center no-repeat; ) #prewbutton:hover, #nextbutton:hover( opacitet:1;)

Lad os se på det mere detaljeret. Først giver vi hovedblokken med id'et "slider-wrap" den nødvendige bredde. Da alle andre blokke er indsat i den, behøver højden ikke at angives, det afhænger af, hvad der er indeni. Derefter skal vi indstille dimensionerne på beholderen, hvori diasene skal være placeret. Dette er #slider. Lad os give den bredde og højde, samt for eksempel en kant på 10 pixels. Her er bredden 640px, hvilket er mindre end forælderens bredde, da vi tilføjer 10px-kanter til højre og venstre. Bredden på selve diasene (.slide) afhænger også af bredden af ​​denne div.

Og den sidste ting: vi skal indstille position: i forhold til objektglasbeholderen, da objektglassene indeni er med absolut positionering. For selve slides er det kun bredden og højden, der er indstillet i CSS. De resterende egenskaber er angivet i jQuery-scriptet.

Selector.sli-links er en blok, der vil indeholde knapper til at flytte til det ønskede dias. Disse knapper er simple elementer i formularen nummer, som automatisk vil blive indsat i den nødvendige mængde sammen med deres parent.sli-links. For knapper sætter vi smuk udsigt, nemlig, vi laver hver knap firkantet, justerer dem alle i midten, og takket være overflow: hidden og text-indent:-9999px fjerner vi teksten og efterlader kun baggrundsikonerne, som også ændres, når du holder musen over dette element med markøren. For nemheds skyld brugte jeg sprites, som reducerede antallet af billeder.

Dernæst er den aktive knap designet. Vi ændrer blot placeringen af ​​baggrunden. Derefter vil vi redesigne linksene for at gå til næste og forrige slides. Du kan give dem ethvert design, ligesom knapper. Disse links indsættes automatisk i #slider. Men for at de kunne ses, spurgte jeg dem absolut positionering og et toplag (z-indeks:3), så de vises over diasene. Jeg tror, ​​at med CSS er alt klart og enkelt her: Du kan ændre næsten alle egenskaber for at designe skyderen, som du har brug for.

Lad os nu se på selve scenariet:

Var hwSlideSpeed ​​​​= 700; var hwTimeOut = 3000; var hwNeedLinks = sand; $(document).ready(function(e) ( $(".slide").css(("position" : "absolut", "top":"0", "venstre": "0")).skjul ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow)( clearTimeout(slideTime); $ (".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(pil == "næste")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if(pil == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) else( slideNum = arrow; ) $(".slide").eq( slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active") ; ) if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $ ( "#prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += " " + indeks + ""; }); $("

").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pause = false; var rotator = function())( if(!pause)(slideTime = setTimeout(function())( animSlide(" næste")), hwTimeOut);) ) $("#slider-wrap").hover(function())(clearTimeout(slideTime); pause = true;), function())(pause = falsk; rotator(); ) ); rotator(); ));

Først gemmes indstillingerne i variabler: hwSlideSpeed ​​​​- hastigheden af ​​at dreje diaserne, hwTimeOut - det tidspunkt, hvorefter det sker automatisk ændring slide, hwNeedLinks - styrer linkene "Næste" og "Forrige" - hvis værdien af ​​denne variabel er sand, vil disse links blive vist, og hvis de er falske, vil de ikke blive vist (som på min blogs hovedside ).

Dernæst installerer vi det nødvendige CSS-egenskaber for dias ved hjælp af .css()-metoden. Vi stabler blokke med slides oven på hinanden ved hjælp af absolut positionering, skjuler dem derefter all.hide(), og viser derefter kun den første. Variablen slideNum er nummeret på det aktive dias, det vil sige tælleren.

Hovedlogikken i vores jQuery-skyder er animSlide-funktionen. Det kræver én parameter. Hvis vi sender strengene "next" eller "prew" ind i den, vil det fungere betingede erklæringer og næste eller forrige dias vil blive vist i overensstemmelse hermed. Hvis vi sender et tal som en værdi, vil dette tal blive det aktive slide, og det vil blive vist.

Så denne funktion skjuler den aktuelle div, beregner en ny og viser den.

Bemærk at .fadeIn() metoden, som gør det aktive slide synligt, får et andet argument. Dette er den såkaldte funktion ring tilbage. Det udføres, når diaset vises helt. I dette tilfælde gøres dette for at sikre automatisk rulning af slides. Rotatorfunktionen defineret nedenfor kalder animSlide-funktionen igen for at gå videre til næste dias med det ønskede tidsinterval: vi får en lukning, der sikrer konstant rulning.

Alt fungerer fint, men vi er nødt til at stoppe automatiseringen, hvis brugeren flytter markøren til skyderen eller trykker på knapperne. Pausevariablen oprettes til dette formål. Hvis dens værdi er positiv - sand, så automatisk skift vil ikke være. Ved at bruge .hover()-metoden specificerer vi: Ryd timeren, hvis den kører - clearTimeout(slideTime), og sæt pause = true. Og efter at have flyttet markøren, slå pausen fra og kør rotator()-lukningen.

Derudover skal vi oprette nye elementer på siden og placere dem det rigtige sted. Ved at bruge each()-løkken for hvert slide (div med klasse .slide), vil vi oprette et span-element, inden i hvilket der er et tal - nummeret på sliden. Dette nummer bruges i animationsfunktionen til at flytte til diaset med dette nummer. Lad os pakke alt ind i en div med de nødvendige klasser, og i sidste ende får vi følgende markering:

Det ser ud til, hvorfor opretter vi markup inde i scriptet og ikke i HTML-koden? Faktum er, at hvis brugeren for eksempel har scripts deaktiveret, vil han ikke se elementer, der ikke fungerer, og det vil ikke forvirre ham. Derudover er koden forenklet, hvilket er godt for SEO.

Som et resultat vil skyderlayoutet se sådan ud (jeg brugte billeder som dias og installerede 5 af dem):

Nedenfor kan du se, hvordan vores jQuery-skyder fungerer på demosiden og downloade alle de nødvendige kilder.

Til sidst et par punkter om integrationen af ​​denne skyder med Drupal. Du kan tilføje denne kode til en skabelonfil, for eksempel i page.tpl.php, og vedhæfte scriptet som separate js-filer til temaet. Jquery i Drupal er aktiveret som standard, men kører i kompatibilitetstilstand (). Der er to muligheder for forbedring. Eller pak al js-kode:

(funktion ($) ( // Al din kode... ))(jQuery);

eller udskift $-symbolerne i hele scriptet med jQuery. Sådan her:

JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolut", "top":"0", "venstre": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // etc .

Eksemplet har allerede implementeret den første metode.

Tak fordi du læste med! Skriv kommentarer, kom igen. Du kan også abonnere på RSS for at modtage blogopdateringer først!

Tilføjet: Det er ikke alt. Læs. Der vil vi tilføje nye funktioner til dette script.