Kirjailijalta: huolimatta huhuista sivujen ilman vieritystä näkyvän osan väitetystä ”kuolemasta”, hyvän liukusäätimen tarve ei ole kadonnut mihinkään. Ollaanpa hetki rehellisiä – liukusäätimet ovat hauskoja. Lisäksi mikään muu, toisin kuin liikkuva sisältö, ei aiheuta käyttäjässä "vau"-efektiä. Kaikki liukusäätimet ovat sarja useita dioja, jotka korvaavat toisensa, ja on erittäin tärkeää, että liukusäätimen koodi on mahdollisimman kevyt. Tässä jQuery on hyödyllinen.
Katso 20 Envato Marketin jQuery-liukusäädintä ja huomaa, että on liukusäätimiä, jotka ovat enemmän kuin pelkkä liukusäädin.
Nyt reagoiva liukusäädin, joka on myös kosketusnäyttöystävällinen, tarkoittaa paljon enemmän kuin ennen. RoyalSlider yhdistää molemmat ominaisuudet: mukautuvuuden ja työskentelyn kosketusnäyttöjen kanssa. Hyvä valinta, koska galleria on kirjoitettu HTML5:llä ja CSS3:lla.
Muutamia mielenkiintoisia ominaisuuksia:
JavaScript. Nopea aloitus
SEO optimointi
Korkea muokattavuus
Yli 10 aloitusmallia
CSS3-siirtymissä on varavaihtoehto
Mielestäni siistein ominaisuus on "modulaarinen skriptiarkkitehtuuri", jonka avulla voit poistaa tarpeettomat asiat JS-päätiedostosta ja siten vähentää painoa. RoyalSlider, jQueryn kosketusnäytön kuvagalleria, on vankka JavaScript-liukusäädin, jonka pitäisi olla jokaisen kehittäjän työkalupakki.
Ei ole helppoa tehdä jotain "vallankumouksellista" liukusäätimellä. Liukusäätimissä on niin monia ominaisuuksia, joita voit lisätä niihin. Slider Revolution on kuitenkin todella hyvä yritys. JQuery-liukusäätimien joukossa tämä esiintymä täyttää kaikki mahdolliset vaatimukset.
Liukusäätimen ominaisuuksien luettelo on niin pitkä, joten listaan vain parhaat:
Parallaksiefekti ja mukautettu animaatio
Rajoittamaton taso ja dioja linkeillä
käyttövalmiit, syvästi muokattavat tyylit
ja paljon enemmän
Mahdollisuus lisätä kuvia, sisäänrakennettu videosoitin ja linkkejä sosiaaliset verkostot tekee Slider Revolutionista yhden verkon joustavimmista ja mukautetuimmista vaihtoehdoista.
Otsikko "LayerSlider Responsive jQuery Slider Plugin" ei todellakaan tee oikeutta tälle liukusäätimelle.
Yli 200 2D- ja 3D-diasiirtymää kääntää kenen tahansa pään.
Pari merkittävää ominaisuutta:
13 skiniä ja 3 valikkotyyppiä
Mahdollisuus sijoittaa kiinteä kuva liukusäätimen päälle
Ja jQueryn varavaihtoehto
Ja paljon enemmän
Kuten edellisessä liukusäätimessä, lähes mitä tahansa sisältöä voidaan lisätä, jopa HTML5-multimediasisältöä. LayerSlider herättää liukusäätimet eloon ja on myös erittäin kaunis.
jQuery Banner Rotator / Slideshow on melko yksinkertainen liukusäädin, joka ei uhraa mitään ydintoimintoja.
Mahdollisuudet:
Työkaluvinkkejä, tekstilisäyksiä jne.
Esikatselu ja eri vaihtoehtoja komponenttien katseluun
Ajastin viiveellä yhdelle liukusäätimelle tai kaikille
Useita siirtymiä kaikille dioille tai erilaisia siirtymiä jokaiselle erikseen
jQuery Banner Rotator / Slideshow sisältää vain perusominaisuudet verrattuna muihin jQuery-liukusäätimiin, mutta sinun ei pidä unohtaa sitä.
Jokaisella verkossa näkyvällä liukusäätimellä on oma ainutlaatuinen näkemyksensä ja se ratkaisee kaikki alansa ongelmat. Mutta ei tämä. All In One -liukusäädintä voidaan kutsua "all inclusive".
Uskon, että useimmilla web-kehittäjillä ja suunnittelijoilla on todistettu ratkaisu, mutta he etsivät aina jotain uutta. Ja tämä "jotain uutta" sisältää:
Bannerin pyörittäjä
esikatselubanneri
Soittolistan banneri
Sisällön liukusäädin
Karuselli
Kaikki liukusäädintyypit tukevat useimpia, elleivät kaikkia, jQuery-liukusäätimien vaatimista toiminnoista. Onko All In One -liukusäädin All Inclusivesi?
Jos liukusäätimesi ei reagoi eikä tue kosketusnäyttöjä, sinulla on väärä liukusäädin. UnoSlider on oikein.
Tämä liukusäädin on löytänyt paikkansa auringossa yksinkertaisuuden ja rikkaiden ominaisuuksien väliltä. Toiminnot:
Teeman tuki
12 valmiiksi tehtyä teemaa
40 siirtymää
IE6+ tuki
Kaikki ominaisuudet keskittyvät suunnitteluun ja tyyliin, mikä tekee UnoSlideristä erinomaisen sisällön liukusäätimen, jossa on mahdollisuus lisätä teemoja.
Etsitkö "yksi jQuery-liukusäädintä hallitsemaan niitä kaikkia"? Kokeile Master Slideriä – jQueryn kosketusnäytön liukusäädintä eri näytöille…
Mitä tulee hyvään suunnitteluun, tämä esimerkki on yksi parhaista:
Yli 25 mallia
Laitteistokiihdytetyt siirtymät
Kosketa ja pyyhkäise tuki
Ja paljon enemmän
Interaktiiviset siirtymät, animoidut tasot ja hotspotit kiinnittävät varmasti huomiosi. Master Slider on taideteos.
TouchCarousel houkuttelee ilmaisella tuella ja päivityksillä. Tämä ei kuitenkaan ole kaikki tämän kevyen jQuery-karusellin liukusäätimen ominaisuudet.
Jos nimi sisältää sanan "kosketus", voit arvata, että liukusäädin on täysin reagoiva ja tukee kosketusta. Muut ominaisuudet:
SEO optimointi
Älykäs automaattitoisto
CSS3-laitteistokiihdytetyt siirtymät
Mukautettava käyttöliittymä ja 4 skiniä Photoshopille
TouchCarousel on ainutlaatuisen fyysisen liukuvierityksensä ansiosta aivan uudenlainen käyttökokemus mobiililaitteissa.
jQuery-liukusäätimiä voidaan käyttää muuhunkin kuin vain verkkosivustoihin. Niistä voi olla hyötyä myös verkkosovelluksissa. Advanced Sliderin avulla voit tehdä tämän.
HTML- tai XML-merkinnällä tämä edistynyt liukusäädin tekee pysyvän vaikutuksen:
Animoidut tasot ja älykäs video
Yli 100 siirtymää ja yli 150 mukautettua ominaisuutta
15 liukusäädintä, 7 vierityspalkin skiniä ja natiivi lightbox-tuki
Näppäimistön navigointi, kosketustuki ja täydellinen räätälöinti
Ja paljon enemmän
Paras ominaisuus on kuitenkin Advanced Slider, jQuery XML Slider API, joka tekee liukusäätimestä täydellisen valinnan verkkosovelluksellesi.
Yksi niistä jQueryn liukusäätimistä, joka saa sinut haluamaan katsoa demon ennen kuin alat lukea sen ominaisuuksista. Haluat vain ymmärtää, mitä tämä "zoom in/out -tehoste" tarkoittaa.
Zoomaustehoste on melko heikko, mutta se lisää hallittavuutta ja todellista kosketusta kuvaan, kun taas liukusäätimen muu osa on staattinen. Liukusäätimen ominaisuudet:
CSS3-kerroksen siirtymät
Animaation lopetusvaihtoehto tasoille
Kiinteä leveys, koko näyttö ja koko leveysasetukset
Animoitu teksti HTML- ja CSS-muotoilulla
Useimmat liukusäätimet yrittävät pakata mahdollisimman monta tehostetta, ja jQuery Slider Zoom In/Out Effect Fully Responsive sisältää vain Ken Burns -efektin, mutta se on hyvin toteutettu.
Kuten edellä mainittu Advanced Slider - jQuery XML Slider, jQuery Carousel Evolutionilla on oma API, jota voidaan käyttää parantamaan toimintoja tai integroida liukusäädin toiseen projektiin.
JavaScript. Nopea aloitus
Opi JavaScriptin perusteet käytännön esimerkin avulla verkkosovelluksen rakentamisesta
Kuvien, HTML-merkintöjen, YouTube- ja Vimeo-videoiden avulla saat myös:
SEO optimointi
9 karusellityyliä
Varjo- ja heijastustehosteet
Kuvan kokoa voi säätää, sekä edessä että takana
jQuery Carousel Evolution on yksinkertainen karuselli, jolla on monia käyttötarkoituksia.
Sexy Slider ei ole yhtä seksikäs kuin ennen. Ikänsä vuoksi tämä liukusäädin on kuitenkin luotettava.
Ensi silmäyksellä liukusäädin ei ole kovin vaikuttava, mutta jos se on hyvin konfiguroitu, se sopii täydellisesti suunnitteluusi. Mahdollisuudet:
Toista dioja automaattisesti
Kuvatekstit
Jatkuva diatoisto
6 siirtymäefektiä
Sexy Slider odottaa sinun vapauttavan täyden voimansa ja vapauttavan potentiaalinsa.
Kaikilla näillä mobiiliystävällisillä malleilla ja tuella kosketusnäytöt Mukava nähdä jQuery-liukusäädin, joka ei ole unohtanut pöytätietokoneita.
jQuery Image & Content Scroller w/ Lightbox tukee näppäimistön syöttöä ja hiiren rullaa muun muassa:
Vaaka- ja pystysuuntaus
Tekstitykset liukusäätimen sisällä tai ulkopuolella
Mahdollisuus asettaa tietty määrä dioja näkyville kerrallaan
Upotetut kuvat, Flash, iframe, Ajax ja upotettu sisältö
Liukusäätimessä on myös sisäänrakennettu valolaatikko. Vaihtoehtoisesti et voi käynnistää itse liukusäädintä jQuery Image & Content Scroller w/ Lightbox -sovelluksessa, vaan voit käynnistää lightboxin erikseen.
Useimmilla jQuery-liukusäätimillä on oma muotoilu. Voit muokata sitä itse, mutta joskus haluat vain kaiken olevan liukusäätimen sisällä. Huomiota edustaa Translucent.
Liukusäätimessä on paljon esiasetuksia. Sinun on ehkä vain määritettävä tietyt asetukset ja se on siinä. Mahdollisuudet:
6 eri tyyliä
4 siirtymäefektiä
2 pyyhkäisyä
Mukautettavat painikkeet ja tarrat
Kuten muutkin, tämä liukusäädin on kosketuskäyttöinen, reagoiva ja laitteistokiihdytetty. Translucent on minimaalisella muotoilulla varustettu liukusäädin, joka asettaa itse sisällön etusijalle.
Haluatko tehdä koko näytön sivuston dioilla? Sitten tarvitset FSS:n.
Itse asiassa on erittäin helppoa luoda koko näytön liukusäädinsivusto käyttämällä tätä jQuery-liukusäädintä. Mahdollisuudet:
AJAX-tuki
Vierityspalkki
Tuki syvälinkitysteknologialle
2 erilaista siirtymätehostetta
Myös näppäimistötukeen ja 11-sivuiseen oppaaseen kannattaa kiinnittää huomiota. Todellinen vaikutelma on kuitenkin FSS:n paino, vain 5 kt.
Toinen esimerkki tyylikeskeisestä jQuery-liukusäätimestä, joka tekee työn hyvin. Zozo Accordion on pakollinen kaikille, jotka etsivät hyvää harmonikkaliukua, jossa on mahdollisuus vaihtaa tyyliä.
Tällä CSS3-animaatiokauneudella on myös melko laaja valikoima ominaisuuksia:
Vaaka- ja pystysuora harmonikka
Semanttinen HTML5 ja SEO optimointi
Tuki kosketukselle, näppäimistölle ja WAI-ARIAlle
Yli 10 skiniä ja 6 ulkoasua
Ja paljon enemmän
Zozo Accordionilla on ilmainen tuki ja jatkuvat päivitykset sekä kaikki ominaisuudet, jotka haluat nähdä jQuery-haitarissa.
jQuery Responsive OneByOne Slider Plugin on enemmän kuin yksinkertainen animaatio kuin liukusäädin. Sen sijaan, että näyttäisi yhden dian kerrallaan, tämä esiintymä täyttää näytön asteittain dioilla, kunnes alueella ei ole enää tilaa, ennen kuin siirrytään seuraavaan diaan.
CSS3-animaatio toimii Animate.css-tiedostosta, se on kevyt, siinä on useita kerroksia ja se on mobiiliystävällinen. Useita ominaisuuksia:
Siellä on myös vedä ja pudota -navigointivaihtoehto. jQuery Responsive OneByOne Slider Plugin saa tehonsa Twitter Bootstrap -karusellista.
Tätä helpompaa jQuery-liukusäädintä ei ole. Toimimiseen tarvitaan vain 3 kilotavua liukusäädintä, joten Accordionza on kevyin haitarityyppinen liukusäädin.
Jos et pidä kolmesta tyylivaihtoehdosta, voit muokata HTML- ja CSS-koodia itse. Mahdollisuudet:
Näppäimistön navigointi
Helppo muokata tehosteita ja painikkeita
Progressiivinen tehostustekniikka - toimii ilman JavaScriptiä
Muista, että Accordionza voi näyttää monia muunnelmia sekasisällöstä, mikä tekee siitä erittäin joustavan.
MightySlider on todella tehokas liukusäädin. Sitä voidaan käyttää paitsi yksinkertaisena kuvan liukusäätimenä, myös koko näytön yksisuuntaisena liukusäätimenä valikkokohteiden navigoinnilla. Sen avulla voit tehdä upean yksisivuisen verkkosivuston.
Konepellin alta löydät monia vaihtoehtoja:
Näppäimistö, hiiri ja kosketustuki
CSS3-laitteistokiihdytetyt siirtymät
Puhdista kelvollinen merkintä ja SEO-optimointi
Rajoittamaton määrä dioja, kuvatekstitasoja ja tehosteita
API on erittäin tehokas ja kehittäjäystävällinen, mikä avaa useita tapoja käyttää sitä. MightySlider on erinomainen progressiivinen jQuery-liukusäädin, jossa on puhdas ja hyvin kommentoitu koodi.
Parallax Slider toimii kuten jQuery Responsive OneByOne Slider Plugin ja sen avulla voit animoida jokaisen kerroksen erikseen samassa diassa. Voit animoida kaikki diat tai jopa yhden lisäämällä parallaksianimaatiota.
Sarjan mukana tulee 4 erityyppistä liukusäädintä, joissa kaikissa on parallaksiefekti. Muiden jQuery-liukusäätimien tapaan siinä on:
Täysi muokattavuus
Kosketa tukea
Täysin reagoiva, rajattomasti kerroksia
Automaattinen toisto, silmukka, korkeuden ja leveyden säätö ja ajastin
Animoidut tasot eivät ole vain tekstiä tai kuvia. Voit myös lisätä YouTube-, Vimeo- ja HTML5-videoita. Parallax Slider on toinen hyvä esimerkki siitä, kuinka voit simuloida Flash-tehosteita jopa paremmin kuin itse Flash, jota myös kaikki laitteet tukevat.
On mielenkiintoista nähdä, kuinka jQuery-liukusäätimet ovat kasvaneet jostakin, joka yksinkertaisesti korvaa yhden kuvan toisella, valtavaksi joukoksi luovia työkaluja. Nyt on olemassa 3D, parallaksi liukusäätimiä, koko sivun liukusäätimiä, reagoivia liukusäätimiä ja niitä, joita voidaan tarkastella pöytätietokoneet sekä älypuhelimissa.
Jos et pidä mistään tämän luettelon liukusäätimistä, voit aina käydä läpi Envaton jQuery Code Tutorial -ohjelman ja kehittää jotain täysin uutta ja ainutlaatuista.
Tai tutustu muihin Envato Marketin liukusäätimiin, joista valita. Mikä on suosikki jQuery-liukusäätimesi ja miksi?
Hei rakkaat blogin lukijat. Tänään esittelen teille hyödyllisen valikoima ilmaisia jQuery-liukusäätimiä esimerkkeineen. Jos päätät silti laittaa kuvan liukusäätimen resurssiisi, tämä valinta on sinulle erittäin hyödyllinen, ja usko minua, sinulla on paljon valinnanvaraa. Lisäksi kaikki liukusäätimet esimerkeillä, ja jokaista niistä voit kokeilla toiminnassa. Yleensä en häiritse, valitse :-)
Yleisin ja ei-iso pikkukuvien liukusäädin sivustollasi.
Erittäin yksinkertainen ja mielenkiintoinen liukusäädin pikkukuvilla, joka sopii melkein mihin tahansa malliin.
Suuri ja erittäin kaunis kuvan liukusäädin mielenkiintoisella tekstin vierityksellä.
Yleisin ja yksinkertaisin liukusäädin resurssillesi
Näyttävä liukusäädin, jonka ohittaminen on epärealistista.
Seiso ja tyylikäs tekstin liukusäädin kuvilla ja mukavalla vieritystehosteella.
Mielenkiintoisia vieriviä kuvia, jotka rullaavat jatkuvasti ja tasaisesti. Oletuksena on kuvia erilaisista hedelmistä, jotka voit muuttaa omaksi.
Mielenkiintoinen liukusäädin, jossa on suuret vaaleanpunaiset nuolet, jotka muuttavat kokoa zoomaamalla kuvaa.
Aluksi tämä artikkeli kirjoitettiin tarkoituksena selittää, kuinka luodaan Web-sivuille kuvien vieritysliukusäädin. Tämä artikkeli ei ole mitenkään opetuksellinen luonteeltaan, se on vain esimerkki siitä, kuinka harkintakohdetamme voidaan toteuttaa. Voit käyttää tässä artikkelissa annettua koodia eräänlaisena mallina tällaiselle kehitykselle, toivon, että pystyn välittämään lukijalle riittävän yksityiskohtaisesti ja helposti saatavilla olevan kirjoittamani olemuksen.
Ja nyt asiaan, ei niin kauan sitten minun piti laittaa liukusäädin yhdelle sivustolle, mutta kun etsin Internetistä valmiita skriptejä, en löytänyt mitään hyödyllistä, koska. jotkut eivät toimineet niin kuin tarvitsin, kun taas toiset eivät käynnistyneet ollenkaan ilman konsolin virheitä. Käyttää jQuery-laajennukset liukusäätimeksi se tuntui minusta liian epämiellyttävältä, koska. Vaikka ratkaisen ongelman tällä, minulla ei ole mitään käsitystä tämän mekanismin toiminnasta, ja laajennuksen käyttäminen yhden liukusäätimen vuoksi ei ole kovin optimaalista. En myöskään todellakaan halunnut ymmärtää kieroja skriptejä, joten päätin kirjoittaa liukusäätimelle oman käsikirjoitukseni, jonka itse merkkaan tarpeen mukaan.
Ensin meidän on päätettävä itse liukusäätimen logiikasta ja jatkettava sitten toteutusta, tässä vaiheessa on erittäin tärkeää saada selkeä käsitys tämän mekanismin toiminnasta, koska ilman sitä emme voi kirjoittaa koodia, joka toimii tarkasti. haluamallamme tavalla.
Päätavoitteemme tulee olemaan näkymä, eli lohko, jossa näemme, kuinka kuvamme pyörivät, siinä meillä on dia kääre, tämä on lohkomme, joka sisältää kaikki kuvat rivissä yhdelle riville ja joka muuttaa sijaintiaan sisällä näkymä.
Lisäksi sivuilla sisällä näkymä, pystysuunnassa keskellä, siellä on edestakaisin painikkeita, kun niitä napsautetaan, muutamme myös asentoa dia kääre suhteellisesti näkymä, mikä aiheuttaa kuvien vierityksen. Ja lopuksi, viimeinen kohde on navigointipainikkeemme, jotka sijaitsevat alareunassa näkymä.
Kun napsautamme niitä, katsomme yksinkertaisesti tämän painikkeen sarjanumeroa ja siirrymme uudelleen tarvitsemamme diaan siirtämällä dia kääre(muutos tehdään muutoksen kautta muuntaa css-ominaisuudet, jonka arvoa lasketaan jatkuvasti).
Minusta tämän koko asian logiikan pitäisi olla selvä edellä sanomani jälkeen, mutta jos jossain tulee vielä väärinkäsityksiä, niin koodissa kaikki selviää, tarvitset vain vähän kärsivällisyyttä.
Nyt kirjoitetaan! Ensin avataan omamme hakemistotiedosto ja kirjoita sinne tarvitsemamme merkinnät:
Kuten näette, ei mitään monimutkaista lohko liukusäätimelle toimii vain samana lohkona, johon liukusäätimemme sijoitetaan, sen sisällä se on jo näkymä, joka sisältää meidän dia kääre, eli sisäkkäinen lista, tässä li ovat dioja ja img- kuvia niiden sisällä. Kiinnitä huomiota siihen, että kaikkien kuvien on oltava samankokoisia tai vähintään mittasuhteita, muuten liukusäädin näyttää vinolta. sen mitat riippuvat suoraan kuvan mittasuhteista.
Nyt pitää tyylitellä koko juttu, yleensä tyylejä ei erityisemmin kommentoida, mutta päätin keskittyä tähän, ettei tule väärinkäsityksiä jatkossa.
Aloitetaan siitä lohko liukusäätimelle, toistan, tämä on lohkomme sivulla, jonka määritämme liukusäätimen alle, sen korkeus riippuu sen leveydestä ja kuvamme mittasuhteista, koska näkymä vie koko leveyden lohko liukusäätimelle, sitten itseään liukumäki on sama leveys, ja vastaavasti sen sisällä oleva kuva muuttaa korkeutta leveydestä riippuen (suhteet säilyvät). Sijoitin tämän elementin sivulleni vaakasuoraan keskelle, 100px sisennettynä ylhäältä, mikä teki sen sijainnista esimerkin kannalta mukavamman.
Elementti näkymä, kuten jo mainittiin, vie meidän koko leveyden lohko liukusäätimelle, sillä on omaisuutta ylivuoto piilotettu, sen avulla voimme piilottaa kuvasyötteen, joka menee kuvaportin ulkopuolelle. 
Seurata css-ominaisuus - user-select:none, voit päästä eroon liukusäätimen yksittäisten elementtien sinisestä korostamisesta painikkeiden useilla napsautuksella.
Jatketaan dia kääre miksi asema: suhteellinen, mutta ei ehdoton? Kaikki on hyvin yksinkertaista, koska. jos valitsemme toisen vaihtoehdon, niin omaisuuden kanssa viewport overflow:hidden mikään ei näytä meistä, tk. itse näkymä ei sovi korkeuteen dia kääre, minkä vuoksi sillä on korkeus: 0. Miksi leveydellä on väliä ja miksi se ylipäätään asetetaan? Asia on siinä, että diojen leveys on yhtä suuri kuin 100 % näköalasta, ja järjestää ne riviin, tarvitsemme paikan, jossa ne seisovat, joten leveys dia kääre pitäisi olla yhtä suuri 100 % näkymän leveys kerrottuna diojen määrällä ( minun tapauksessani 4). Mitä tulee siirtyminen ja siirtymä-ajoitus-toiminto, sitten täällä 1s tarkoittaa asennon muutosta dia kääre tapahtuu 1 sekunnin sisällä ja tarkkailemme sitä, ja helppous sisään-ulos- animaatiotyyppi, jossa se etenee aluksi hitaasti, kiihtyy keskelle ja hidastaa sitten uudelleen, täällä voit jo asettaa arvot itse.
Seuraava ominaisuusjoukkojen lohko dia kääre ja sen alielementit ovat nollapehmustettuja, kommentit ovat tarpeettomia.
Seuraavaksi muotoilemme diojamme, niiden leveyden tulee olla yhtä suuri kuin leveys näkymä, mutta koska he ovat sisällä dia kääre, jonka leveys on yhtä suuri kuin näkymän leveys kerrottuna diojen määrällä, niin saat leveyden näkymä jälleen, tarvitsemme 100 % leveydestä dia kääre jaa diojen lukumäärällä (minun tapauksessani taas 4:llä). Sitten muutamme ne rivielementeiksi kanssa näyttö:inline ja aseta rivitys vasemmalle lisäämällä ominaisuus kellua:vasen. Pro list-style:ei mitään Voin sanoa, että käytän sitä oletusmerkin poistamiseen li, useimmissa tapauksissa on eräänlainen standardi.
Niin diakuva se on yksinkertaista, kuva vie koko leveyden liukumäki, liukumäki säätää sen korkeuteen dia kääre säätää korkeuteen liukumäki, ja korkeus näkymä vuorostaan ottaa korkeuden arvon dia kääre, joten liukusäätimemme korkeus riippuu kuvan mittasuhteista ja liukusäätimelle tarjotun lohkon koosta, josta kirjoitin jo yllä.
Luulen, että keksimme tämän tyylit, toistaiseksi teemme yksinkertaisen diaesityksen ilman painikkeita, ja kun olemme varmistaneet, että se toimii oikein, lisäämme ja muotoilemme niitä.
Avataan omamme js-tiedosto, joka sisältää liukusäätimen koodin, älä unohda sisällyttää jQuery, koska kirjoitamme käyttämällä tätä kehystä. Muuten, tätä kirjoitettaessa käytän versiota jQuery 3.1.0. Itse tiedosto ja komentosarja on sisällytettävä tunnisteen loppuun kehon, koska työskentelemme DOM-elementtien kanssa, jotka on alustettava ensin.
Toistaiseksi meidän täytyy ilmoittaa pari muuttujaa, joista yksi tallentaa sen dian numeron, jonka näemme tietyllä hetkellä näkymä Soitin hänelle slideNow, ja toinen tallentaa näiden diojen lukumäärän, tämän slideCount.
muuttuja slideNow Alkuarvoksi on asetettava 1, koska kun sivu latautuu, merkintöjemme perusteella näemme ensimmäisen dian näkymä.
V slideCount laitamme lasten lukumäärän dia kääre, täällä kaikki on loogista.
Seuraavaksi sinun on luotava funktio, joka on vastuussa diojen vaihtamisesta oikealta vasemmalle, julistetaan se:
Kutsumme sitä koodimme päälohkossa, johon pääsemme, mutta toistaiseksi kerromme toiminnollemme, mitä sen on tehtävä:
Tarkistamme ensin, olemmeko tällä hetkellä syötteemme viimeisellä dialla? Tätä varten otamme kaikkien käyttämiemme diojen lukumäärän $("#slidewrapper").lapset().pituus ja vertaa sitä dian numeroon, jos ne ovat yhtä suuret, tämä tarkoittaa, että meidän on aloitettava nauhan näyttäminen uudelleen, yhdestä diasta, mikä tarkoittaa, että vaihdamme muunna css-ominaisuus klo dia kääre päällä kääntää(0, 0), jolloin se siirretään alkuperäiseen asentoonsa niin, että ensimmäinen dia on näkökentässämme, älkäämme myöskään unohtako --webkit ja --ms riittävän selaimen välisen näytön saamiseksi (katso css-ominaisuuden viite). Sen jälkeen älä unohda päivittää muuttujan arvoa slideNow, kertoen hänelle, että dia numero 1 on näkyvissä: slideNow = 1;
Sama ehto sisältää sen, että tarkastetaan, että näkemämme dian numero on meidän diojen lukumäärän sisällä, mutta jos näin ei tehdä jotenkin, palataan taas ensimmäiseen diaan.
Jos ensimmäinen ehto ei täyty, tämä tarkoittaa, että emme ole tällä hetkellä viimeisellä dialla emmekä jollain olemattomalla, mikä tarkoittaa, että meidän on vaihdettava seuraavaan, teemme tämän siirtämällä dia kääre leveyttä vastaava arvo näkymä, siirto tapahtuu jälleen tutun ominaisuuden kautta Kääntää, jonka arvo on yhtä suuri kuin "käännä(" + translateWidth + "px, 0)", missä translateWidth on etäisyys, joka meidän dia kääre. Muuten, ilmoitetaan tämä muuttuja koodimme alussa:
Kun olet siirtynyt seuraavaan diaan, kerrotaan nyt diallemme, että näemme seuraavan dian peräkkäin: slideNow++;
Tässä vaiheessa jotkut lukijat saattavat ihmetellä, miksi emme vaihtaneet $("#viewport").width() esimerkiksi johonkin muuttujaan slideWidth pitääkö liukumäen leveys aina käden ulottuvilla? Vastaus on hyvin yksinkertainen, jos sivustomme on mukautuva, niin liukusäätimelle varattu lohko on myös mukautuva, tämän perusteella voimme ymmärtää, että kun muutat ikkunan leveyttä lataamatta sivua uudelleen (esimerkiksi kääntämällä puhelinta sivulla), leveys näkymä muuttuu, ja vastaavasti yhden dian leveys muuttuu. Siinä tapauksessa meidän dia kääre siirtyy alkuperäisen leveyden arvoon, mikä tarkoittaa, että kuvat näytetään osissa tai niitä ei näytetä ollenkaan näkymä. Kirjoittaminen funktiossamme $("#viewport").width() sijasta slideWidth saamme sen laskemaan leveyden aina, kun vaihdat dioja näkymä, mikä mahdollistaa näytön leveyden jyrkän muutoksen vierityksen tarvitsemamme dian kohdalle.
Kirjoitimme kuitenkin funktion, nyt meidän on kutsuttava se tietyn aikavälin jälkeen, voimme myös tallentaa intervallin muuttujaan, jotta jos haluamme muuttaa sitä, muuta vain yhtä arvoa koodissa:
Aika js-muodossa määritetään millisekunteina.
Kirjoita nyt seuraava rakenne:
Kaikki ei ole helpompaa, olemme suunnittelun läpi $(dokumentti).ready(funktio()()) sanomme, että seuraavat toimet on suoritettava, kun asiakirja on ladattu täyteen. Seuraavaksi kutsumme yksinkertaisesti funktiota nextSlide jonka väli on yhtä suuri kuin slideInterval, käyttämällä sisäänrakennettua toimintoa setInterval.
Kaikkien yllä suorittamiemme vaiheiden jälkeen liukusäätimen pitäisi pyöriä täydellisesti, mutta jos jokin meni pieleen, ongelma voi olla joko versiossa jQuery, tai tiedostojen väärässä yhteydessä. Ei myöskään tarvitse sulkea pois sitä, että voisit tehdä virheen jossain koodissa, joten voin vain neuvoa sinua tarkistamaan kaikki uudelleen. 
Sillä välin siirrytään eteenpäin, lisää liukusäätimeemme sellainen toiminto kuin vierityksen lopettaminen vierityksen päällä, tätä varten meidän on kirjoitettava koodin päälohkoon (konstruktion sisällä $(document).ready(funktio () ())) sellainen asia:
Jotta voimme aloittaa tämän koodin analysoinnin, meidän on tiedettävä, mikä on vaihtoväli. Ensinnäkin tämä on muuttuja, joka tallentaa säännöllisen kutsun nextSlide-funktiolle, yksinkertaisesti sanottuna, meillä on tämä koodirivi: setInterval(nextSlide, slideInterval);, muuttui tälläiseksi: switchInterval = setInterval(seuraava dia, diaväli);. Näiden manipulointien jälkeen pääkoodilohkomme sai seuraavan muodon:
Tässä käytän tapahtumaa leijuu, joka tarkoittaa "on hover", tämän tapahtuman avulla voit seurata hetkeä, jolloin siirrän hiiren kohteen päälle, tässä tapauksessa näkymä.
Viennin jälkeen tyhjennän välin, jonka ilmoitan suluissa (tämä on meidän vaihtoväli), sitten pilkuilla erotettuna kirjoitan mitä teen, kun siirrän kohdistimen taaksepäin, tässä lohkossa määritän jälleen vaihtoväli jaksollinen toimintokutsu nextSlide.
Nyt, jos tarkistamme, voimme nähdä, kuinka liukusäätimemme reagoi leijumiseen, mikä estää dioja vaihtamasta.
Joten on aika lisätä painikkeita liukusäätimeemme, aloitetaan edestakaisin painikkeilla.
Merkitään ne ensin:
Aluksi tämä merkintä saattaa olla käsittämätön, sanon heti, että käännän nämä kaksi painiketta yhdeksi div luokan kanssa prev-next-btns vain avuksesi, et voi tehdä tätä, tulos ei muutu, nyt lisäämme niihin tyylejä ja kaikki tulee selväksi:
Ensin asetamme painikkeemme kautta asema: ehdoton, joten hallitsemme vapaasti heidän asemaansa sisällämme näkymä, määritä sitten näiden painikkeiden koot ja käyttämällä raja-säde pyöristä kulmat niin, että nämä painikkeet muuttuvat ympyröiksi. Niiden väri tulee olemaan valkoinen #F F F, ja niiden sisennys yläreunasta näkymä on yhtä suuri kuin puolet tämän korkeudesta näkymä miinus puolet itse painikkeen korkeudesta (25px minun tapauksessani), joten voimme keskittää ne pystysuoraan. Seuraavaksi määritämme, että kun viemme hiiren niiden päälle, osoitin muuttuu muotoon osoitin ja lopuksi kerrotaan painikkeillemme yksitellen, että ne tulee asettaa 20 pikseliä taaksepäin reunoistaan, jotta voimme nähdä ne haluamallamme tavalla.
Jälleen voit muotoilla sivun elementtejä haluamallasi tavalla. Annan vain esimerkin tyyleistä, joita päätin käyttää.
Muotoilun jälkeen liukusäätimemme pitäisi näyttää suunnilleen tältä: 
Seuraavaksi palaamme omaan js-tiedosto, jossa kuvailemme painikkeiden toimintaa. No, lisätään vielä yksi toiminto, se näyttää meille edellisen dian:
Sitä kutsutaan prevSlide, sitä kutsutaan vain, kun napsautat edellinen btn. Tarkistamme ensin, olemmeko 1. dialla vai ei, tässä myös tarkistamme, olemmeko meidän slideNow diojen todellisen alueen rajojen yli ja jos jokin ehdoista toimii, siirrymme viimeiseen diaan siirtämällä dia kääre haluamaamme arvoon. Laskemme tämän arvon kaavalla: (yhden dian leveys) * (diojen lukumäärä - 1), otamme tämän kaiken miinusmerkillä, koska siirtämällä sitä vasemmalle, käy ilmi näkymä näyttää nyt viimeisen dian. Tämän lohkon lopussa meidän on myös sanottava muuttujalle slideNow että meillä on nyt viimeinen dia näkökentässämme.
Jos emme ole ensimmäisessä diassa, meidän on siirrettävä 1 taaksepäin, tätä varten muutamme jälleen ominaisuutta slidewrapper-muunnos. Kaava on: (yhden dian leveys) * (nykyisen dian numero - 2), kaikki tämä taas otetaan miinusmerkillä. Mutta miksi -2, eikä -1, pitääkö meidän siirtää vain sama 1 liuska taaksepäin? Tosiasia on, että jos olemme esimerkiksi toisella dialla, niin muuttuja x ominaisuuksia muunnos:translate(x,0) meidän dia kääre on jo yhtä suuri kuin yhden dian leveys, jos kerromme hänelle, että meidän on vähennettävä 1 nykyisen dian numerosta, niin saamme jälleen yksikön, jolla olemme jo siirtyneet dia kääre, joten sinun on siirrettävä 0:lla juuri näitä leveyksiä näkymä, mikä tarkoittaa diassa nyt - 2.
Nyt meidän on lisättävä nämä rivit pääkoodilohkoon:
Täällä vain seurataan, onko painikkeitamme napsautettu, ja tässä tapauksessa kutsumme tarvitsemiamme toimintoja, kaikki on yksinkertaista ja loogista.
Lisätään nyt dian navigointipainikkeet takaisin merkintöihin:
Kuten näette, sisällä näkymä sisäkkäinen luettelo on ilmestynyt, anna sille tunniste nav-btns, sen sisällä li- navigointipainikkeemme, määritämme niille luokan slide-nav-btn Voit kuitenkin lopettaa merkinnän, siirrytään tyyleihin:
Blok nav-btns, jossa painikkeemme sijaitsevat, annamme omaisuuden asema: ehdoton jotta se ei venyisi näkymä korkeudessa, koska klo dia kääre omaisuutta asema: suhteellinen, asetamme leveydeksi 100 % niin, että kanssa text-align:center keskipainikkeet vaakasuunnassa suhteessa näkymä, käytä sitten omaisuutta pohja Teemme lohkollemme selväksi, että sen tulee olla 20 kuvapisteen etäisyydellä alareunasta.
Painikkeilla teemme saman kuin diojen kanssa, mutta nyt kysymme niitä näyttö: inline-block, koska klo näyttö:inline he eivät vastaa leveys ja korkeus, koska ovat täysin sijoitetussa lohkossa. Teemme niiden väristä valkoisen ja meille jo tutun avulla raja-säde Annetaan heille ympyrän muoto. Kun viemme hiiren niiden päälle, muutamme kursorimme ulkoasua tavalliseen näyttöön.
Ja nyt mennään asiaan jQuery - Osat:
Ilmoitetaan ensin navBtnId-muuttuja, joka tallentaa napsauttamamme painikkeen indeksin:
Tässä olemme, kun napsautat meidän slide-nav-btn kutsua funktiota, joka määrittää ensin muuttujan navBtnId napsautetun painikkeen indeksi, eli sen sarjanumero, koska lähtölaskenta alkaa nollasta, niin jos napsautamme toista painiketta, navBtnId kirjoitetaan arvo 1. Seuraavaksi teemme tarkistuksen, jossa lisäämme painikkeen järjestysnumeroon yhden saadaksemme sellaisen luvun, ikään kuin lähtölaskenta ei olisi 0:sta, vaan 1:stä, vertaamme tätä lukua numeroon nykyisen dian kohdalla, jos ne täsmäävät, emme ryhdy toimenpiteisiin, koska haluttu dia on jo sisällä näkymä.
Jos tarvitsemamme liukumäki ei ole näkyvissä näkymä, sitten laskemme etäisyyden, jolla meidän on siirrettävä dia kääre vasemmalle ja muuta arvoa css-ominaisuudet muunnos käännettäväksi(sama etäisyys pikseleinä, 0). Olemme tehneet tämän jo useammin kuin kerran, joten kysymyksiä ei pitäisi herätä. Lopuksi tallennamme uudelleen nykyisen dian arvon muuttujaksi slideNow, tämä arvo voidaan laskea lisäämällä yksi napsautetun painikkeen hakemistoon.
Siinä on itse asiassa kaikki, jos jokin on epäselvää, jätän linkin jsfiddleen, jossa kaikki materiaaliin kirjoitettu koodi toimitetaan.
Kiitos huomiostasi!
Tunnisteet:
Mutta koska keskustelemme kanssasi JS:n perusteista, niin perusteen tutkimiseksi kuvailen kuinka luodaan yksinkertaisin liukusäädin vain JavaScript-kielellä. No, mennään materiaalin analysointiin!
Kätevien gallerioiden luominen kuvien katseluun vaaditaan kaikissa verkkopalveluissa, joissa on ainakin muutama valokuva. Tällaisia voivat olla verkkokaupat, portfoliosivustot, uutis- ja koulutuspalvelut, yritysten ja viihdepaikkojen verkkosivut valokuvareporteineen jne.
Tämä on kuitenkin liukusäätimien normaali käyttö. Tällaisia teknologioita käytetään myös houkuttelemaan asiakkaita myynninedistämistuotteisiin, -palveluihin tai kuvaamaan yritysten etuja.
Periaatteessa asiakkaita pyydetään upottamaan karusellityyppisiä gallerioita verkkosivuille. Tämä on kätevä työkalu suurikokoisten kuvien katseluun, ja käyttäjä voi vaihtaa dioja eteen- ja taaksepäin. Tässä tapauksessa itse kuvat vaihtuvat yleensä automaattisesti tietyn ajan kuluttua. Tällaista mekanismia kutsuttiin karuselliksi, koska kuvien näyttäminen toistuu ympyrässä.
Tänään, jos haluat, voit löytää epätavallisimmat ja houkuttelevimmat laajennukset valokuvien katseluun Internetissä.
No, nyt luodaan liukusäätimemme. Tässä vaiheessa opetusohjelmassa suosittelen, että käytät puhdasta JavaScriptiä sen toteuttamiseen. Tämä vaihtaa automaattisesti kuvia ympyrässä.
Olen liittänyt hakemukseni koodin alle. Olen jättänyt sinulle kommentteja matkan varrella.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Toivottavasti sinulla ei ollut ongelmia css- ja html-koodin kanssa. Mutta mielestäni on välttämätöntä purkaa käsikirjoituksen työ. Joten siirrytään kirjoitetun tulkitsemiseen.
Joten ensin menetelmän avulla querySelectorAll muuttuja MySlider Annan luettelon kaikista määritetyn alueen elementeistä. Määrittää tämän merkinnän
document.querySelectorAll("#diat .slide")
Siten sisään MySlider tallennetaan neljän elementin kokoelma.
Seuraavaksi määritin, mistä kuvasta aloitan näyttämisen, määrittämällä muuttujan nykyinen kuva nolla. Kun määritän, että dian vaihto tapahtuu 2,7 sekunnin kuluttua ja käsittelytoiminto tulee kutsua nextSlide.
Siirrytään itse funktioon.
Aluksi muutan nykyiselle listakohdalle luokkien kuvauksia, ts. uudelleenkirjoittaminen" liukumäkinäytetään"päällä" liukumäki". Tästä syystä kuvasta tulee näkymätön.
Nyt määritän kokoelmaan uuden elementin, joka tulee näkyviin näytölle. Tätä varten otan nykyisen sijainnin +1. Olet ehkä huomannut, että käytän myös jakoa jäljellä olevalla diojen määrällä (%). Tämä harhautus korvilla on välttämätön, jotta esitys voidaan aloittaa uudessa piirissä. Tältä se näyttäisi kirjaimellisesti.
Sinun on lisättävä "eteenpäin" ja "takaisin" -painikkeet.
Tätä varten sinun on täydennettävä aiemmin kirjoitettua koodia.
Liukusäätimen koko rakenne pysyy samana. Merkintään lisätään kaksi säilöä, jotka toimivat painikkeina.
Painikkeet ottavat paikkansa absoluuttisen sijoittelun ansiosta suhteessa konttiin.slider-box
Slider-box( sijainti : suhteellinen ; leveys : 320px ; korkeus : 210px ; ylivuoto : piilotettu ; ) .slider( position : suhteellinen ; leveys : 10000px ; korkeus : 210px ; ) .slider img( float .sli ;der-)box : left .prev , .slider-box .next( position : Absoluuttinen ; Top : 100px ; näyttö : block ; leveys : 29px ; korkeus : 29px ; cursor : pointer ; ) .slider-box .prev( vasen : 10px ; tausta : url ../images/slider_controls.png ) no-repeat 0 0 ; ) .slider-box .next( oikea : 10px ; tausta : url (../images/slider_controls.png ) no-repeat -29px 0 ; )
Liukusäädin vierittää automaattisesti. Oletuksena liike etenee vasemmalta oikealle, mutta tarvittaessa voit muuttaa sen liikkeen suuntaa kurssimuuttujan avulla. Kun muuttujan arvoa muutetaan 1:stä -1:een, liukusäätimen suunta muuttuu.
Liukusäätimen kuvien ei pitäisi muuttua, kun osoitin on liukusäätimen sisällä. Mitä varten se on? Kaikki on yksinkertaista. Jos hiiren osoitin on liukusäätimen päällä, se tarkoittaa, että sivuston vierailija on kiinnostunut sen sisällöstä. Älä tällä hetkellä vaihda dioja automaattisesti.
$(funktio () ( var liukusäädin = $(".slider" ) , sliderContent = slider.html () , // Liukusäätimen sisältö slideWidth = $(".slider-box") .outerWidth() , // Liukusäätimen leveys slideCount = $(".slider img") .length , // Diojen lukumäärä edellinen = $(".slider-box .prev" ) , // Takaisin-painike next = $(.slider-box .next" ) , // Eteenpäin-painike liukusäädinväli = 3300, // Dian vaihtoväli animaatioaika = 1000, // Aika vaihtaa dioja kurssi = 1 // Liukusäätimen liikesuunta (1 tai -1) marginaali = - slideWidth; // Alkudiojen siirtymä$(.slider img:last" ) .clone () .prependTo (.slider" ) ; // Kopio viimeisestä diasta sijoitetaan alkuun.$(".slider img" ) .eq (1 ) .clone () .appendTo (.slider" ) ; // Ensimmäisen dian kopio sijoitetaan loppuun.$(.slider" ) .css ("margin-left" , - slideWidth) ; // Container.lider siirtyy vasemmalle yhden dian leveydellä. funktio nextSlide() ( // Suorittaa animaatio()-funktion dian siirron suorittamiseksi. interval = window.setInterval (animate, sliderInterval) ; ) toiminto animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // Jos liukusäädin on saavuttanut lopun slider.css (( "marginLeft" :- slideWidth) ); // sitten block.slider palaa alkuasentoonsa marginaali=- slideWidth* 2 ; ) else if (marginaali== 0 && kurssi==- 1 ) ( // Jos liukusäädin on alussa ja paluupainiketta painetaan slider.css (( "marginLeft" :- slideWidth* slideCount) ) ; // sitten block.slider siirtyy lopulliseen asemaan margin=- slideWidth* slideCount+ slideWidth; ) muu ( // Jos yllä olevat ehdot epäonnistuvat, marginaali = marginaali - slideWidth* (kurssi) ; // marginaaliarvo on asetettu näyttämään seuraava dia) slider.animate (( "marginLeft" : margin) , animateTime) ; // Block.slider siirtyy vasemmalle yhden dian verran.) function sliderStop() ( // Liukusäätimen pysäytystoiminto window.clearInterval(interval); )edellinen.napsautus(funktio()( // Takaisin-painiketta painettu var kurssi2 = kurssi; kurssi = - 1 ; animoida() ; // Kutsu animate()-funktiota kurssi = kurssi2 ; ) ) ; next.click(function()( // Takaisin-painiketta painettu if (slider.is (":animated" ) ) ( return false ; ) // Jos animaatiota ei tapahdu var kurssi2 = kurssi; // Väliaikainen muuttuja kurssin arvon tallentamiseen kurssi = 1; // Aseta liukusäätimen suunta oikealta vasemmalle animoida() ; // Kutsu animate()-funktiota kurssi = kurssi2 ; // Kurssimuuttuja palaa alkuperäiseen arvoonsa) ) ; slider.add(next) .add(edellinen) .hover(function()( // Jos hiiren osoitin on liukusäätimen sisällä sliderStop() ; // SliderStop()-funktiota kutsutaan pysäyttämään liukusäädin) , nextSlide); // Kun osoitin poistuu liukusäätimestä, animaatio jatkuu. nextSlide() ; // Kutsu nextSlide()-funktiota } ) ;Sellainen liukusäädin, jossa on painikkeita "eteenpäin" ja "takaisin"
