Yksinkertaiset html css-mallit. Yksinkertaiset HTML-mallit. Pluton – Ilmainen Bootstrap HTML5 -yhden sivun malli
Aloitan sanomalla, että tämä artikkeli on kirjoitettu puhumaan kuvien vieritysliukusäätimen luomisesta verkkosivuille. 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 samankaltaisille kehitysaskeleille. Toivon, että pystyn välittämään lukijalle kirjoittamani olemuksen riittävän yksityiskohtaisesti ja helposti lähestyttävällä tavalla.
Ja nyt asiaan, ei niin kauan sitten minun piti asentaa 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äkiinnostavalta, koska... Vaikka tämä ratkaisee ongelman, minulla ei ole mitään käsitystä tämän mekanismin toiminnasta, ja laajennuksen käyttäminen vain yhdelle liukusäätimelle ei ole kovin optimaalista. En myöskään oikein halunnut ymmärtää vääriä skriptejä, joten päätin kirjoittaa liukusäätimelle oman käsikirjoitukseni, jonka merkitsin itse tarpeen mukaan.
Ensin meidän on päätettävä itse liukusäätimen logiikasta ja siirryttävä sitten toteutukseen Tässä vaiheessa tämän mekanismin toiminnan selkeä ymmärtäminen on erittäin tärkeää, koska ilman sitä emme voi kirjoittaa koodia, joka toimii täsmälleen samalla tavalla kuin me. haluta.
Päätavoitteemme tulee olemaan näkymä, eli lohko, jossa näemme, kuinka kuvamme pyörivät, siinä meillä on liukukääre, tämä on lohkomme, joka sisältää kaikki kuvat rivissä yhdelle riville ja joka muuttaa sijaintiaan näkymä.
Seuraavaksi sivuilla sisällä näkymä, pystysuunnassa keskellä, on takaisin- ja eteenpäin-painikkeet, joita napsauttamalla muutamme myös omien paikkojen sijaintia. liukukääre suhteellisesti näkymä, mikä aiheuttaa kuvien selaamisen vaikutuksen. Ja lopuksi, viimeinen kohde on navigointipainikkeemme, jotka sijaitsevat alareunassa näkymä.
Kun napsautamme niitä, katsomme yksinkertaisesti tämän painikkeen sarjanumeroa ja siirrämme sen haluamamme dialle, jälleen siirtämällä liukukääre(muutos tehdään vaihtamalla muuntaa css-ominaisuudet, jonka arvoa lasketaan jatkuvasti).
Minusta tämän koko homman toimintalogiikka pitäisi olla selvä edellä sanomani jälkeen, mutta jos väärinkäsityksiä vielä ilmenee jossain, niin alla olevassa koodissa kaikki selkiytyy, tarvitset vain vähän kärsivällisyyttä.
Nyt kirjoitetaan! Ensinnäkin avataan omamme hakemistotiedosto ja kirjoita sinne tarvitsemamme merkinnät:
Kuten näette, ei mitään monimutkaista, lohko liukusäätimelle toimii vain lohkona, johon liukusäätimemme sijoitetaan, sen sisällä se on jo näkymä, joka sisältää meidän liukukää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, koska sen mitat riippuvat suoraan kuvan mittasuhteista.
Nyt tätä koko juttua pitää tyylitellä, yleensä tyylejä ei kommentoida, mutta päätin kuitenkin kiinnittää tähän huomiota, jotta ei tule väärinkäsityksiä jatkossa.
runko ( marginaali: 0; täyte: 0; ) #block-for-slider (leveys: 800px; marginaali: 0 automaattinen; margin-top: 100px; ) #viewport (leveys: 100%; näyttö: taulukko; sijainti: suhteellinen; ylivuoto: -webkit-select: ei mitään -o-user-select: ei mitään; : 1s -transition-timing-function: easy-in-out -o-transition-timing-function: ease-in-out ) #slidewrapper ul, #slidewrapper li; ( marginaali : 0; täyttö: 0; ) #slidewrapper li ( leveys: calc(100%/4); listatyyli: ei mitään; näyttö: inline; float: vasen; ) .slide-img (leveys: 100%; )
Aloitetaan lohko liukusäätimelle, tämä, toistan, on lohkomme sivulla, jonka varaamme liukusäätimelle, sen korkeus riippuu sen leveydestä ja kuvamme mittasuhteista, koska näkymä vie koko leveyden lohko liukusäätimelle, sitten itseni 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, 100 pikseliä sisennettynä ylhäältä, mikä teki sen sijainnista esimerkin kannalta kätevämmän.
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 ulottuu kuvaportin ulkopuolelle. 
Seurata css-ominaisuus - user-select:none, voit päästä eroon yksittäisten liukusäädinelementtien sinisestä korostuksesta, kun napsautat painikkeita toistuvasti.
Jatketaan liukukääre, miksi asema: suhteellinen, mutta ei ehdoton? Kaikki on hyvin yksinkertaista, koska... jos valitsemme toisen vaihtoehdon, niin omaisuuden kanssa viewport overflow:hidden Se ei näytä meistä yhtään mitään, koska... itse näkymä ei sovi korkeuteen liukukääre, minkä vuoksi sillä tulee olemaan korkeus: 0. Miksi leveydellä on väliä ja miksi se ylipäätään asetetaan? Tosiasia on, että diojen leveys on yhtä suuri 100 % katseluportista, ja järjestää ne riviin, tarvitsemme paikan, jossa ne seisovat, joten leveys liukukääre pitäisi olla tasa-arvoisia 100 % näkymän leveys, kerrottuna diojen määrällä (minun tapauksessani 4:llä). Mitä tulee siirtyminen Ja siirtymä-ajoitus-toiminto, sitten täällä 1s tarkoittaa, että muutos on asennon muutosta liukukääre tapahtuu 1 sekunnin sisällä ja tarkkailemme sitä ja helppous sisään-ulos- animaatiotyyppi, jossa se alkaa hitaasti, kiihtyy keskelle ja hidastuu sitten uudelleen, tässä voit asettaa arvot oman harkintasi mukaan.
Seuraava ominaisuuslohko määrittää liukukääre ja sen alatason elementeissä ei ole täyttöä, ei kommentteja täällä.
Seuraavaksi muotoilemme diojamme, niiden leveyden tulee olla yhtä suuri kuin leveys näkymä, mutta koska he ovat sisällä liukukää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ä liukukääre jaa diojen lukumäärällä (minun tapauksessani taas 4:llä). Sitten muutamme ne sisäisiksi elementeiksi käyttämällä näyttö:inline ja aseta virtaus vasemmalle lisäämällä ominaisuus kellua:vasen. Noin list-style:ei mitään Voin sanoa, että käytän sitä oletusmerkin poistamiseen li, useimmissa tapauksissa on eräänlainen standardi.
Co diakuva Se on yksinkertaista, kuva vie koko leveyden liukumäki, liukumäki säätää sen korkeuteen, liukukääre säätää korkeuteen liukumäki, ja korkeus näkymä vuorostaan ottaa korkeusarvon liukukääre, joten liukusäätimemme korkeus riippuu kuvan mittasuhteista ja liukusäätimelle tarjotun lohkon koosta, josta kirjoitin jo yllä.
Luulen, että olemme tässä vaiheessa keksineet tyylit, tehdään nyt yksinkertainen diaesitys ilman painikkeita ja kun olemme varmistaneet, että se toimii oikein, lisäämme ja muotoilemme ne.
Avataan omamme js-tiedosto, joka sisältää liukusäädinkoodin, älä unohda muodostaa yhteyttä jQuery, koska Kirjoitamme tätä kehystä käyttäen. Muuten, tätä artikkelia kirjoittaessani käytän versiota jQuery 3.1.0. Itse komentosarjan sisältävä tiedosto on sisällytettävä tunnisteen loppuun kehon, koska työskentelemme DOM-elementtien kanssa, jotka on alustettava ensin.
Toistaiseksi meidän on ilmoitettava pari muuttujaa, joista yksi tallentaa dian numeron, jonka näemme tietyllä hetkellä näkymä, soitin hänelle slideNow, ja toinen tallentaa näiden samojen diojen lukumäärän, tämä slideCount.
var slideNow = 1; var slideCount = $("#slidewrapper").lapset().length);
Muuttuva slideNow on tarpeen asettaa alkuarvo 1, koska kun sivu latautuu, merkintöjemme perusteella näemme ensimmäisen dian näkymä.
SISÄÄN slideCount laitamme lasten lukumäärän liukukääre, täällä kaikki on loogista.
Seuraavaksi sinun on luotava toiminto, joka on vastuussa diojen vaihtamisesta oikealta vasemmalle, julistetaan se:
funktio nextSlide() ( )
Kutsumme sitä koodimme päälohkossa, johon pääsemme myöhemmin, mutta toistaiseksi kerromme funktiollemme, mitä sen on tehtävä:
function nextSlide() ( if (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ( $("#slidewrapper").css("muunnos", "käännä(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++; ) )
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 tarkista se dian numerolla, jos ne osoittautuvat yhtä suureksi, tämä tarkoittaa, että meidän on aloitettava syötteen näyttäminen uudelleen, diasta 1, mikä tarkoittaa, että muutamme muunna css-ominaisuus klo liukukääre päällä kääntää(0, 0), jolloin se siirretään alkuperäiseen asentoonsa niin, että ensimmäinen dia ilmestyy näkökenttään, älkäämme myöskään unohtako –webkit ja –ms riittävän selaimen välisen näytön saamiseksi (katso. css-ominaisuuksien viite). Tämän 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 tämä ei jotenkin täyty, palataan taas ensimmäiseen diaan.
Jos ensimmäinen ehto ei täyty, tämä tarkoittaa, että emme ole tällä hetkellä viimeisellä dialla emmekä jollakin olemattomalla, mikä tarkoittaa, että meidän on vaihdettava seuraavaan, teemme tämän siirtämällä liukukääre vasemmalle leveyttä vastaavalla arvolla näkymä, siirtyminen tapahtuu jälleen tutun ominaisuuden kautta Kääntää, jonka arvo on sama "käännä(" + translateWidth + "px, 0)", Missä translateWidth– etäisyys, jolla meidän liukukääre. Muuten, julistetaan tämä muuttuja koodimme alussa:
var translateWidth = 0;
Kun olet siirtynyt seuraavaan diaan, kerrotaan nyt diallemme, että näemme seuraavan dian: slideNow++;
Tässä vaiheessa jotkut lukijat saattavat ihmetellä, miksi emme vaihtaneet $("#viewport").width() esimerkiksi johonkin muuttujaan slideWidth pitääkö liukumäen leveys aina käsillä? Vastaus on hyvin yksinkertainen, jos sivustomme on mukautuva, niin liukusäätimelle varattu lohko on vastaavasti myös mukautuva, tämän perusteella voimme ymmärtää, että kun muutat ikkunan leveyttä lataamatta sivua uudelleen (esimerkiksi kääntämällä puhelin kyljellään), leveys näkymä muuttuu, ja vastaavasti yhden dian leveys muuttuu. Tässä tapauksessa meidän liukukääre siirtyy alkuperäisen leveyden arvoon, mikä tarkoittaa, että kuvat näytetään osissa tai niitä ei näytetä ollenkaan näkymä. Kirjoittamalla funktioomme $("#viewport").width() sijasta slideWidth pakotamme sen laskemaan leveyden aina, kun vaihdamme dioja näkymä, mikä varmistaa, että kun näytön leveys muuttuu jyrkästi, voimme vierittää tarvitsemamme dian.
Olemme kuitenkin kirjoittaneet funktion, nyt meidän on kutsuttava se tietyn aikavälin jälkeen, voimme myös tallentaa intervallin muuttujaan niin, että jos haluamme muuttaa sitä, voimme muuttaa vain yhtä arvoa koodissa:
var slideInterval = 2000;
Aika js:ssä ilmaistaan millisekunteina.
Kirjoitetaan nyt seuraava konstruktio:
$(dokumentti).ready(funktio () ( setInterval(nextSlide, slideInterval); ));
Kaikki ei voisi olla yksinkertaisempaa täällä, käymme suunnittelua läpi $(asiakirja).ready(funktio () ()) Sanomme, että seuraavat toimet on suoritettava sen jälkeen, 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ä tekemiemme toimien jälkeen liukusäätimen pitäisi pyöriä täydellisesti, mutta jos jokin menee pieleen sinulle, ongelma voi olla joko versiossa jQuery, tai tiedostojen virheellinen yhteys. Ei myöskään tarvitse sulkea pois sitä, että olisit voinut tehdä virheen jossain koodissa, joten voin vain neuvoa sinua tarkistamaan kaikki uudelleen. 
Sillä välin siirrytään eteenpäin, lisää liukusäätimeemme toiminto, kuten vierityksen lopettaminen, kun kohdistinta pidetään, tätä varten meidän on kirjoitettava koodin päälohkoon ($(document).ready(function () ()) -rakenteen sisällä Tämä asia:
$("#näkymäportti").hover(function())( ClearInterval(SwitchInterval); ),function() ( switchInterval = setInterval(seuraava dia, liukuväli); ));
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 jaksollisen 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:
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval);
Tässä käytän tapahtumaa leijuu, joka tarkoittaa "on hover", tämän tapahtuman avulla voin seurata hetkeä, jolloin siirrän osoittimen jonkin kohteen, tässä tapauksessa näkymä.
Liikkumisen jälkeen tyhjennän välin, jonka osoitan 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.
Jos nyt testaamme, voimme nähdä, kuinka liukusäätimemme reagoi leijumiseen ja estää liukusäätimen vaihtamisen.
Nyt on aika lisätä painikkeita liukusäätimeemme, aloitetaan eteenpäin- ja taaksepäin-painikkeilla.
Ensinnäkin merkitään ne:
Aluksi tämä merkintä saattaa olla käsittämätöntä, mutta sanon heti, että käännän nämä kaksi painiketta yhdeksi div luokan kanssa prev-next-btns vain avuksesi, sinun ei tarvitse tehdä tätä, tulos ei muutu, nyt lisäämme niihin tyylejä ja kaikki tulee selväksi:
#edellinen-btn, #seuraava-btn ( sijainti: absoluuttinen; leveys: 50px; korkeus: 50px; taustaväri: #ffff; reunuksen säde: 50%; yläosa: calc(50% - 25px); ) #edellinen- btn:hover, #next-btn:hover ( kursori: osoitin; ) #prev-btn (vasen: 20px; ) #next-btn (oikea: 20px; )
Ensin asetamme painikkeemme kautta asema: ehdoton, jolloin hallitsemme vapaasti heidän asemaansa sisällämme näkymä, sitten ilmoitamme näiden painikkeiden koot ja käytön raja-säde Pyöristetään kulmat niin, että nämä painikkeet muuttuvat ympyröiksi. Niiden väri tulee olemaan valkoinen #F F F ja niiden etäisyys yläreunasta näkymä on yhtä suuri kuin puolet tämän korkeudesta näkymä miinus puolet itse painikkeen korkeudesta (minun tapauksessani 25px), tällä tavalla voimme sijoittaa ne pystysuoraan keskelle. Seuraavaksi osoitamme, 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 meille sopivalla tavalla.
Jälleen voit muotoilla sivuelementit 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 kuvataan painikkeiden toiminta. No, lisätään vielä yksi toiminto, se näyttää meille edellisen dian:
funktio prevSlide() ( if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( "muunnos": "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--;
Sitä kutsutaan prevSlide, sitä kutsutaan vain, kun napsautat prev-btn. Ensin tarkistamme, olemmeko 1. dialla vai ei, tässä myös tarkistamme, onko meidän slideNow diojen todellisen kantaman ulkopuolelle ja jos jokin ehdoista laukeaa, siirrymme viimeiseen diaan siirtämällä liukukääre tarvitsemamme arvoon. Laskemme tämän arvon kaavalla: (yhden dian leveys) * (diojen lukumäärä - 1), otamme tämän kaiken miinusmerkillä, koska siirrämme sen vasemmalle, niin käy näkymä näyttää nyt viimeisen dian. Tämän lohkon lopussa meidän on myös kerrottava muuttuja slideNow että viimeinen dia on nyt näkökentässämme.
Jos emme ole ensimmäisessä diassa, meidän on siirryttävä taaksepäin 1, tätä varten muutamme ominaisuutta uudelleen muunnos liukukäärettä varten. Kaava on: (yhden dian leveys) * (nykyisen dian numero – 2), taas otetaan tämä kaikki miinusmerkillä. Mutta miksi -2, eikä -1, täytyykö meidän siirtää vain 1 dia taaksepäin? Tosiasia on, että jos olemme esimerkiksi toisella dialla, niin muuttuja x ominaisuuksia muunnos:translate(x,0) meidän liukukääre on jo yhtä suuri kuin yhden dian leveys, jos kerromme hänelle, että meidän täytyy vähentää 1 nykyisen dian numerosta, saamme jälleen yhden, jolla olemme jo siirtyneet liukukääre, joten sinun on siirrettävä nämä samat leveydet arvoon 0 näkymä, mikä tarkoittaa diassa nyt - 2.
Nyt meidän on vain lisättävä nämä rivit pääkoodilohkoon:
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));
Täällä vain seuraamme, napsautettiinko painikkeitamme, ja tässä tapauksessa kutsumme tarvitsemiamme toimintoja, kaikki on yksinkertaista ja loogista.
Lisätään nyt dian navigointipainikkeet ja palataan taas merkintöihin:
Kuten näette, sisällä näkymä sisäkkäinen luettelo on ilmestynyt, annetaan sille tunniste nav-btns, sen sisällä li- navigointipainikkeemme, määritämme niille luokan slide-nav-btn, voimme kuitenkin lopettaa merkinnän, siirrytään tyyleihin:
#nav-btns ( sijainti: absoluuttinen; leveys: 100 %; alaosa: 20px; täyte: 0; marginaali: 0; tekstin tasaus: keskellä; ) .slide-nav-btn ( sijainti: suhteellinen; näyttö: inline-block; listatyyli: ei mitään leveys: 20px marginaali: .slide-nav-btn: osoitin;
Blok nav-btns, jossa painikkeemme sijaitsevat, annamme omaisuuden asema: ehdoton, jotta se ei venyisi näkymä korkeudessa, koska klo liukukääre omaisuutta asema: suhteellinen, asetamme leveydeksi 100 %, jotta käyttämällä text-align:center keskitä painikkeet vaakasuoraan suhteessa näkymä, käytä sitten omaisuutta pohja Ilmoitimme lohkollemme, että sen tulisi olla 20 kuvapistettä alareunasta.
Painikkeilla teemme saman kuin diojen kanssa, mutta nyt annamme ne näyttö: inline-block, koska klo näyttö:inline he eivät vastaa leveys Ja korkeus, koska ovat täysin sijoitetussa lohkossa. Tehdään niistä valkoisia ja hyödynnetään sitä, mitä jo tiedämme raja-säde Annetaan heille ympyrän muoto. Kun viemme hiiren niiden päälle, muutamme kursorimme ulkoasua tavalliseen näyttöön.
Aloitetaan nyt jQuery - osat:
Ilmoitetaan ensin muuttuja navBtnId, joka tallentaa napsauttamamme painikkeen indeksin:
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)", ));
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 arvo 1 tallennetaan Seuraavaksi teemme tarkistuksen, jossa lisäämme painikkeen sarjanumeroon yhden saadaksemme luvun, ikään kuin lähtölaskenta ei alkaisi nollasta, vaan 1:stä, vertaamme tätä numeroa painikkeen numeroon. nykyinen dia, jos ne täsmäävät, emme ryhdy toimiin, älä toimenpiteitä, koska vaadittu dia on jo sisällä näkymä.
Jos tarvitsemamme liukumäki ei ole näkyvissä näkymä, sitten laskemme etäisyyden, jonka meidän täytyy liikkua liukukääre vasemmalle ja muuta arvoa muunna css-ominaisuudet käännettäväksi(sama etäisyys pikseleinä, 0). Olemme tehneet tämän jo useammin kuin kerran, joten ei pitäisi olla kysymyksiä. Lopuksi tallennamme uudelleen nykyisen dian arvon muuttujaksi slideNow, tämä arvo voidaan laskea lisäämällä yksi napsautetun painikkeen hakemistoon.
Siinä kaikki, jos jokin on epäselvää, jätän linkin jsfiddleen, jossa kaikki materiaaliin kirjoitettu koodi toimitetaan.
Kiitos huomiostasi!
Tunnisteet: Lisää tunnisteita
1. Erinomainen jQuery-diaesitys
Suuri, näyttävä diaesitys jQuery-tekniikoilla.
2. jQuery-laajennus "Scale Carousel"
Skaalautuva diaesitys jQuerylla. Voit määrittää itsellesi parhaiten sopivat diaesityksen koot.
3. jQuery-laajennus "slideJS"
Kuvan liukusäädin tekstikuvauksella.
4. Plugin "JSliderNews"
5. CSS3 jQuery -liukusäädin
Kun viet hiiren navigointinuolien päälle, seuraavan dian pyöreä pikkukuva tulee näkyviin.
6. Hieno jQuery "Esityssykli" -liukusäädin
jQuery-liukusäädin, jossa on kuvan latausilmaisin. Automaattinen liukujen vaihto on saatavilla.
7. jQuery-laajennus "Parallax Slider"
Liukusäädin tilavuustaustatehosteella. Tämän liukusäätimen kohokohta on taustan liike, joka koostuu useista kerroksista, joista jokainen vierii eri nopeudella. Tuloksena on tilavuusvaikutelman jäljitelmä. Se näyttää erittäin kauniilta, voit nähdä itse. Vaikutus näkyy sujuvammin selaimissa, kuten Opera, Google Chrome, IE.
8. Tuore, kevyt jQuery-liukusäädin "bxSlider 3.0"
Esittelysivun "esimerkit"-osiosta löydät linkkejä tämän laajennuksen kaikkiin mahdollisiin käyttötarkoituksiin.
9. jQuery-kuvan liukusäädin, "slideJS"-laajennus
Tyylikäs jQuery-liukusäädin voi varmasti koristella projektiasi.
10. jQuery-diaesityslaajennus "Easy Slides" v1.1
Helppokäyttöinen jQuery-laajennus diaesitysten luomiseen.
11. jQuery Slidy -laajennus
Kevyt jQuery-laajennus eri versioissa. Automaattinen liukujen vaihto on saatavilla.
12. jQuery CSS -galleria automaattisella dian vaihtamisella
Jos vierailija ei napsauta "Eteenpäin"- tai "Takaisin"-nuolia tietyn ajan kuluessa, galleria alkaa rullata automaattisesti.
13. jQuery-liukusäädin "Nivo Slider"
Erittäin ammattimainen, laadukas, kevyt laajennus voimassa olevalla koodilla. Saatavilla on monia erilaisia diasiirtymätehosteita.
14. jQuery-liukusäädin "MobilySlider"
Tuore liukusäädin. jQuery-liukusäädin erilaisilla kuvanvaihtotehosteilla.
15. jQuery Plugin "Slider²"
Kevyt liukusäädin automaattisella liukusäätimellä.
16. Tuore javascript-liukusäädin
Liukusäädin automaattisella kuvanvaihdolla.
Plugin diaesitysten toteuttamiseen automaattisella dianvaihdolla. Näyttöä on mahdollista ohjata kuvien pikkukuvien avulla.
jQuery CSS -kuvan liukusäädin NivoSlider-laajennuksella.
19. jQuery-liukusäädin "jShowOff"
Sisällön kiertolaajennus. Kolme käyttövaihtoehtoa: ilman navigointia (automaattinen diaesitysmuodon vaihtaminen), navigointi painikkeiden muodossa, navigointi pikkukuvien muodossa.
20. Shutter Effect Portfolio -laajennus
Tuore jQuery-laajennus valokuvaajan portfolion suunnitteluun. Galleriassa on mielenkiintoinen vaikutus kuvien vaihtamiseen. Valokuvat seuraavat toisiaan objektiivin sulkimen toiminnan kaltaisella vaikutuksella.
21. Kevyt javascript CSS -liukusäädin "TinySlider 2"
Kuvan liukusäätimen toteutus Javascriptin ja CSS:n avulla.
22. Mahtava liukusäädin "Tinycircleslider"
Tyylikäs pyöreä liukusäädin. Siirtyminen kuvien välillä suoritetaan vetämällä liukusäädintä punaisen ympyrän muodossa kehän ympärillä. Se sopii täydellisesti verkkosivustollesi, jos käytät suunnittelussasi pyöreitä elementtejä.
23. Kuvan liukusäädin jQuerylla
Kevyt liukusäädin "Slider Kit". Liukusäädintä on saatavana eri malleina: pysty- ja vaakasuuntaisina. Erilaisia navigointimuotoja kuvien välillä on myös toteutettu: "Eteenpäin"- ja "Takaisin"-painikkeilla, hiiren rullalla, hiiren klikkaamalla diaa.
24. Galleria miniatyyreineen "Slider Kit"
Galleria "Slider Kit". Pikkukuvien vieritys tapahtuu sekä pysty- että vaakasuunnassa. Siirtyminen kuvien välillä tapahtuu käyttämällä: hiiren rullaa, hiiren napsautusta tai viemällä kursori pikkukuvan päälle.
25. jQuery-sisällön liukusäädin "Slider Kit"
Pysty- ja vaakasisällön liukusäädin jQueryn avulla.
26. jQuery-diaesitys "Slider Kit"
Diaesitys automaattisella dian vaihdolla.
27. Kevyt ammattimainen javascript CSS3 -liukusäädin
Siisti jQuery- ja CSS3-liukusäädin, joka luotiin vuonna 2011.
jQuery-diaesitys pikkukuvilla.
29. Yksinkertainen jQuery-diaesitys
Diaesitys navigointipainikkeilla.
30. Mahtava jQuery "Skitter" -diaesitys
jQuery Skitter -laajennus upeiden diaesitysten luomiseen. Plugin tukee 22 (!) tyyppistä erilaista animaatiotehostetta kuvia vaihdettaessa. Voi toimia kahdella dian navigointivaihtoehdolla: käyttämällä diojen numeroita ja käyttämällä pikkukuvia. Muista katsoa demo, erittäin laadukas löytö. Käytetyt tekniikat: CSS, HTML, jQuery, PHP.
31. Diaesitys "Kyllä"
Toimiva diaesitys. Diat voivat olla: yksinkertaisia kuvia, kuvia kuvateksteillä, kuvia työkaluvihjeillä, videoita. Voit käyttää nuolia, dian numerolinkkejä ja näppäimistön vasen/oikea-näppäimiä navigointiin. Diaesityksestä on useita versioita: pikkukuvien kanssa ja ilman. Näet kaikki vaihtoehdot napsauttamalla esittelysivun yläosassa olevia linkkejä Demo #1 - Demo #6.
Erittäin omaperäinen muotoilu kuvan liukusäätimelle, joka muistuttaa tuuletinta. Animoitu diasiirto. Kuvien välillä liikkuminen tapahtuu nuolilla. Siinä on myös automaattinen vaihto, joka voidaan kytkeä päälle ja pois päältä yläreunassa olevalla Play/Pause-painikkeella.
Animoitu jQuery-liukusäädin. Taustakuvat skaalautuvat automaattisesti, kun selainikkunan kokoa muutetaan. Jokaisen kuvan kohdalla näkyy lohko, jossa on kuvaus.
34. "Flux Slider" -liukusäädin jQueryn ja CSS3:n avulla
Uusi jQuery-liukusäädin. Useita hienoja animoituja tehosteita dioja vaihdettaessa.
35. jQuery-laajennus "jSwitch"
Animoitu jQuery-galleria.
Helppo jQuery-diaesitys automaattisella dianvaihdolla.
37. SlideDeck 1.2.2 -laajennuksen uusi versio
Ammattimainen sisällön liukusäädin. Vaihtoehtoja on automaattinen diojen vaihtaminen sekä vaihtoehto hiiren rullalla siirtymiseen diojen välillä.
38. jQuery-liukusäädin "Sudo Slider"
Kevyt kuvan liukusäädin jQuerylla. Toteutusvaihtoehtoja on paljon: kuvien vaaka- ja pystysuuntainen vaihtaminen, linkeillä dianumeroon ja ilman, kuvateksteillä ja ilman, erilaisia kuvanvaihtotehosteita. Siinä on automaattinen liukanvaihtotoiminto. Linkit kaikkiin toteutusesimerkkeihin löytyvät esittelysivulta.
39. jQuery CSS3 -diaesitys
Pikkukuvilla varustettu diaesitys tukee automaattista diojen vaihtotilaa.
40. jQuery-liukusäädin "Flux Slider"
Liukusäädin, jossa on monia kuvanvaihtotehosteita.
41. Yksinkertainen jQuery-liukusäädin
Tyylikäs kuvan liukusäädin jQueryllä.
Joten, hyvät aloittelevat verkkovastaavat, olemme oppineet HTML:n perusteet.
Sovelletaan nyt tätä tietoa ja tehdään itsestämme nopeasti pieni verkkosivusto ja laitetaan se Internetiin.
Totta, on vaikeaa luoda täysimittaista resurssia pelkällä html:llä, mutta useiden sivujen käyntikorttisivusto on täysin mahdollista.
Jos tämä on jollekin täsmälleen tavoite, eikä halua oppia muita ohjelmointikieliä, tämä artikkeli on heille.
Lyhyesti sanottuna itse kirjoitetussa versiossa ilman sisällönhallintajärjestelmää ei ole olemassa mitään yksinkertaisempaa.
Ja niille, jotka tarvitsevat jotain viileämpää, artikkelin lopussa on linkkejä artikkeleihin, joissa on lohkomallikoodi CSS: llä ja dynaaminen sivustokoodi PHP: llä.
Luomme tälle sivulle puhtaan html:n verkkosivun, niin sanotusti - verkkosivun verkkosivuston sisällä, täysin toimiva ja valmiina täytettäväksi sisällöllä.
Jaetaan koko prosessi kolmeen osaan.
1. Luo tietokoneellesi sivustohakemisto.
2. Verkkosivuston luominen.
3. Sivuston siirto tietokoneeltamme isännöintiin eli Internetiin.
Verkkosivustohakemiston luominen tietokoneellesi
Ensimmäinen kohta on yksinkertaisin. Hakemiston luominen näkyy erittäin selvästi artikkelissa (kaikki tämän sivun linkit avautuvat erilliseen ikkunaan, jotta ne eivät eksy).
Näytän sinulle yksityiskohtaisesti, mitä ja mihin kansioon se laitetaan pääsivun koodin jälkeen, jotta sinulla on jo jotain, jolla mennä hakemistoon.
Siirrytään sitten toiseen kohtaan, luovimpaan kohtaan.
Verkkosivustomallin luominen
Mallin luomiseen tarvitset editorin, johon sinun on liitettävä alla oleva koodi.
Tämä voi olla joko yksinkertainen Windowsin Muistio tai mikä tahansa muu tekstieditori.
Otetaan mallin pohjaksi monikerroksinen HTML-taulukko. Aiemmin, ennen CSS:n tuloa, kaikki verkkosivustot kirjoitettiin taulukoihin, mutta nyt lohkoasettelusta on tullut suositumpi.
Mutta tähän päivään asti taulukkorakenne ei ole vanhentunut ja sitä käytetään menestyksekkäästi.
Esimerkiksi investointi-CMS H-skripti monimutkaisella toiminnallisuudella, joka on suunniteltu kokonaan taulukoiden perusteella.
Joten tässä on verkkosivusto, jossa on minimaalinen muotoilu.
Kuinka suunnitella taulukoita tulevaisuudessa, esitetään artikkelissa yksityiskohtaisesti.
|
<!--Luo konttitaulukko, jonka määritämme seuraavasti
sisustus:
border="1" - kehys säilön ympärillä. Lisäämällä lukua voit lisätä kehyksen paksuutta.
align="center" - aseta säiliö näytön keskelle.
rules="rows" - poista kaksoisreuna.
style="width:60%;" - Lisää tyyliominaisuuksia, jotka tekevät
kontti ja koko sivusto ovat "kumia".
Tällä tavalla on mahdotonta tehdä täysimittaista mukautuvaa suunnittelua.-->