aga pärast joont
!
Nüüd analüüsime oma HTML-koodi ja ühendame selle tipud. Toimikus main.tpl sisestage silt õigesse kohta (uued uudised) mis omakorda kuvab populaarsete uudiste loendi, mille välimust saab failis kohandada topenews.tpl, selle kohta allpool .
Meie märgistatud kood peaks välja nägema järgmine:
(uued uudised)
Noh, nüüd peame lihtsalt ise uudised paika panema.
Faili avamine topnews.tpl ja kohe alguses siseneme:
kõige lõpus sulgeme atribuudi
Kui kasutate ühte minu mallidest Bootstrapiga, saate selle valikuna kasutada failis järgmisi ridu topnews.tpl:
(pealkirja limiit = "55")
(teksti limiit = "100")
Lugema
Uudised kuvatakse järgmiselt
Seda pistikprogrammi saab kasutada peaaegu kõikjal, samuti kasutada silti (kohandatud kategooria)
See võib asendada ka tavalise DLE galerii, avaldan selle kohta eraldi artikli. Kasutage seda tervisele;)
Lugupidamisega admin.
lae alla
Tähelepanu: allalaadimispiir on täis. Tule homme =)
1. jQuery klikiCarousel
Blokeeri kerivate uudiste teadetega. Blokkide sirvimiseks kasutatakse vasakut / paremat noolt. Arhiiv sisaldab karusselli kahes stiilis: hele ja tume.
1.jQuery karusselli pistikprogramm "carouFredSel"
Korralik värske jQuery pildikarussell.
4. JQuery pistikprogramm: Elastislide karussell
5. Pistikprogramm "TinyCarousel"
Suurepärased sisuliugurid jQuery abil piltide karusselli kujul. Demolehel kirjeldatakse, kuidas seda karusselli oma saidile kinnitada.
Slider Kit pistikprogramm, kergekaaluline karussell, millel on erinevad kerimismeetodid.
7.javascripti karussell
8. jQuery pistikprogramm "Grid Navigation Effects"
Algne navigeerimine piltide pisipiltide vahel. Efekti kuvamiseks demolehe paremas servas klõpsake nuppu Üles ja Alla. See jQuery lahendus mõjutab ka pisipiltide hõljumist ja hiireratta kerimist.
9. Kerge karussell
10. Karussell Easy Paginate plokkidest
jQuery pistikprogramm "Lihtne pagineerimine". Iga ristkülikukujuline plokk tähistab li loendis tavalist üksust ja kui üksusi on rohkem kui kolm, siis nende kõigi vaatamiseks peate kasutama liugurilaadset navigeerimist (kasutades noolesid "edasi", "tagasi" ja navigeerimisnuppu kasutades) nupud allpool).
11. Vertikaalne pöörleja "Vertical Ticker"
JQuery vertikaalne pöörleja: lehe sisu automaatne kerimine. Pakutakse navigeerimisnuppe, samuti on võimalus pööramine peatada ja uuesti käivitada. Kui hõljutate hiire kohal, peatub liikumine. HTML-i märgistuse tasemel on kerimisplokid esindatud tavaliste li-loendi üksustega.
12.javascripti css-i keritav ala
javascripti lahendus "TinyScroller" keritava ala loomiseks, mis on pakitud DIV-i konteinerisse.
13. jQuery pistikprogramm "Smooth Div Scroll"
Pistikprogramm sisu horisontaalse kerimise rakendamiseks konkreetses piirkonnas. Kui hõljutate hiirekursorit ala vasaku või parema serva kohal, algab kerimine.
Sisuslaidide vahel navigeerimist saab teha noolte abil või klõpsates pisipildil. Allosas on nupp Näita, et peita / näidata pisipilte või slaidi täielikke kirjeldusi.
15. Ringikujuline sisukarusselli sisu pöörleja
17. Kerija
Kerimisega ilmuv kerijaga plokk. Sisu saate sirvida kas kerimisriba või hiireratta abil.
See jQuery lahendus sai inspiratsiooni Apple'i veebisaidi sarnasest mõjust. Selle ettevõtte arendajad on alati leidnud huvitavaid lahendusi, mis inspireerisid veebimeistreid kogu maailmast. Pistikprogrammi demonstreerimiseks valige loendist ükskõik milline kategooria.
19. Äge liugur
Liugur luuakse automaatselt. Tootenime, kirjelduse, lingi ja pildiaadressiga andmed võetakse failist slider.db.txt. Kasutatavad tehnoloogiad: CSS, PHP, jQuery.
20. Klotside pööramine jQuery abil
Bloki pööramise efekti nägemiseks klõpsake ühel demo lehe väikesel ristkülikul
Näiteks sisu kerimise pistikprogrammi saab kasutada viimaste uudiste kuvamiseks või saidil Twitteri reklaamlehtede kuvamiseks.
22. Dünaamiline plokk "Klientide ülevaated"
Ploki sisu automaatne pööramine. Kasutatavad tehnoloogiad: PHP, XML, CSS, jQuery.
See pistikprogramm kaardistab loendiüksused (ul li) jQuery karussellielementidesse.
26. javascripti ImageFlow karussell
Pilte on lihtne hiirerattal kerida.
27. sisu kerimine
Kompaktne plokk saidi uusimate materjalide või uudiste väljakuulutamisega. Vasakus veerus kuvatakse lehekülgede kaupa viimaste uudiste lühiteadete loend. Kui valite ühe neist, kuvatakse paremas veerus üksikasjalikum kirjeldus ja link väljaande täisteksti lugemiseks. Rakendatud jQueryga.
Linkidega pilte keritakse, hiirekursori peal kerimine peatub ja kuvatakse navigeerimisriba. Kui hõljutate kursorit pildi kohal, kuvatakse juhtnuppude vahel ka selle nimi. Tundub lehel väga kena
33. sisu kerimine, Mootoolsi pistikprogramm "Kerimisriba"
Kerimine toimub nii kerimisriba kui ka hiirerattaga.
Tehke karussell puhtas JS-is, nullist ja iseendast? Miks peaks ratast uuesti leiutama, kui on olemas valmis lahendused libe / öökull liugurid? Sellel on vähemalt kaks põhjust:
- hariduslikel eesmärkidel
- testiülesannete täitmiseks
Tööle kandideerimisel kasvõi vabale kohale HTML küljendaja, palutakse teil mitte ainult karussell paigutada, vaid ka seda ellu viia Js, ilma kolmandate osapoolte teeke kasutamata.
Karussellnäide
Mida JavaScript elementidega teeb?
Sündmuste korral muudab meetodite abil elementide omadusi. Kolm vaala, kellest kinni hoida JavaScripti:
- omadused
- meetodid
- arengud
Kasutaja käivitab sündmuse ise onclick, kui klõpsate nuppu. Programmeerija ülesandeks on riputada kliki sündmus soovitud elemendile ja kirjutada brauseri jaoks juhised (funktsioon), mis peaks juhtuma, kui klõpsata.
HTML-märgistus karussellile
Loome piltide jaoks konteineri, sisestage pildid ise ja kaks nuppu - Edasi / tagasi.
CSS-i stiilid
#gallery (
laius: 640px;
veeris: 20px auto;
teksti joondamine: keskel;
} #gallery .photos img (
laius: 100%;
kuva: puudub;
}
#gallery .photos img: esimene laps (
kuva: plokk;
}
Nupud (
ülemine serv: 20 pikslit;
}
Karusselliloogika
Kuidas üldse kirjutada Js kood, kui te ei saa aru toimuva loogikast. Vajutades nuppu Edasi, praegune pilt kaob ja selle asemele ilmub uus. Vaateväljas on alati üks pilt, kuid kus on ülejäänud? Ja ülejäänud, peitsime, palusime kõik pildid kuva: puudub jättes alles esimese, küsides temalt kuva: plokk, pseudoklassi kaudu esimene laps.
Kuidas veenduda, et iga kord, kui klõpsate nuppu Edasi, kadus esimene pilt ja ilmus teine ning teise asemel kolmas. Nõutav, vahetage atribuut kuva, vahel mitte ühtegi / blokeerida, kui klõpsate nuppu.
JS-kood
Elementide valiku tegemine
Hankige nupud Edasi / tagasi meetodi abil valija abil querySelector ja pane need muutujatesse btn_prev / btn_next.
Olgu btn_prev = document.querySelector ("# gallery .buttons .prev");
las btn_next = document.querySelector ("# galerii .nupud .next");
Kõik pildid saame valija abil, meetodi kaudu querySelectopAll ja pane need samasse muutujasse pilte.
querySelectopAll- saab hulga elemente, st kõik pildid.
Olgu pildid = document.querySelectorAll ("# gallery .photos img");
Massiivis salvestatakse elemendid juba nummerdatuna, alustades nullist. Seetõttu võime neile viidata arvu järgi. Kuid kõigepealt loome uue muutuja ja paneme sinna esimese pildi numbri, selle, millel on omadus kuva: plokk.
Olgu i = 0; // ekraanil oleva praeguse pildi number
Viidame praegusele pildile ja muudame seda stiilides, atribuudis kuva.
Pildid [i] .style.display = "pole"; // peida praegune pilt
Nüüd pole ekraanil ühtegi pilti. Kuidas järgmine pilt seal ilmub? Teame, et järgmise pildi arv on alati ühe võrra suurem kui eelmise pilt.
I ++; // suurendage i muutujat ühe võrra
pildid.pikkus- see on piltide arv, mis võib muutuda, nii et pole vaja näidata, et meil on 3 pilti, brauser teab seda juba. Suurendame loendurit i, iga kord ükshaaval, kuni ilmub viimane pilt, ja sunnime siis sunniviisiliselt karusselli uuesti esimese pildi juurde tagasi pöörduma. Seda nimetatakse loopimiseks.
Me näeme ette tingimus, et kui loendur i saab rohkem kui olemasolevate piltide arv, naaseb praeguse pildi juurde number 0.
Kui (i> = pildid.pikkus) (
i = 0; // muutuja i võrdub 0
}
Piltide sirvimisel vastupidises järjekorras loendur i, peaks ühe võrra vähenema. Kui muutuja väärtus muutub väiksemaks kui null, tuleb sinna panna viimase pildi number.
Btn_prev.onclick = function () {
pildid [i] .style.display = "pole";
i = i - 1;
kui ma< 0){
i = pildid.pikkus - 1;
}
pildid [i] .style.display = "blokeeri";
}
Lahuta kogusummast pildid.pikkus, üks ja saame pildi numbril 2. See on viimane pilt, kuna arvutus algab programmeerimisel nullist.
Paigutuse kujundaja positsiooni testi läbimiseks vajate JS-i enesekindlat mõistmist, see on keskendunud lihtsalt küljendajatele.
Praegu on liugur - karussell - funktsionaalsus, mis teil lihtsalt peab olema ettevõtte veebisaidil, veebisait - portfell või mõni muu ressurss. Koos täisekraani kujutise liuguritega sobivad horisontaalsed karussellliugurid hästi igasse veebidisaini.
Mõnikord peaks liugur hõivama ühe kolmandiku saidi lehest. Siin kasutatakse karusselliliugurit koos üleminekuefektide ja tundlike paigutustega. E-kaubanduse saidid kasutavad karusselliliugurit, et kuvada mitu fotot üksikutes postitustes või lehtedel. Liuguri koodi saab vabalt kasutada ja muuta vastavalt teie vajadustele.
Kasutades jQueryd koos HTML5 ja CSS3-ga, saate oma lehti huvitavamaks muuta, pakkudes neile ainulaadseid efekte ja juhtides külastajate tähelepanu saidi konkreetsele alale.
Slick - kaasaegne liuguri pistikprogramm - karussell
Slick on tasuta jquery pistikprogramm, mille arendajad väidavad, et nende lahendus vastab kõigile teie liuguri nõuetele. Automaatselt reageeriv karusselliliugur võib mobiilseadmete jaoks töötada paanirežiimis ja töölauaversiooni puhul pukseerimisrežiimis.
Sisaldab üleminekuefekti "tuhmumine", huvitavat funktsiooni "režiim keskel", piltide laisk laadimist automaatse kerimisega. Uuendatud funktsioon sisaldab slaidide ja slaidifiltri lisamist. Kõik selleks, et saaksite pistikprogrammi vastavalt oma vajadustele kohandada.
Demorežiim | Lae alla
Owl Carousel 2.0 - jQuery - puutetundlik pistikprogramm
Selle pistikprogrammi arsenalis on lai valik funktsioone, mis sobivad nii algajatele kui ka kogenud arendajatele. See on karusselliliuguri uuendatud versioon. Tema eelkäija sai täpselt sama nime.
Liugur sisaldab üldisi funktsionaalsuse parandamiseks sisseehitatud pistikprogramme. Animatsioon, video taasesitus, liuguri automaatne esitamine, laisk laadimine, automaatne kõrguse reguleerimine on Owl Carousel 2.0 peamised omadused.
Pistikprogrammi mugavamaks kasutamiseks mobiilseadmetes on kaasas lohistamise tugi.
Pistikprogramm sobib suurepäraselt suurte piltide kuvamiseks isegi mobiilseadmete väikestel ekraanidel.
Näited | Lae alla
jQuery hõbedase raja pistikprogramm
Üsna väike, kuid funktsionaalne rikas pistikprogramm, mis võimaldab teil lehele asetada liuguri - väikese tuumaga karussell, mis ei tarbi palju saidi ressursse. Pistikprogrammi saab kasutada vertikaalsete ja horisontaalsete liugurite, animatsioonide kuvamiseks ja galeriist pildikomplektide loomiseks.
Näited | Lae alla
AnoSlide - ülikompaktne tundlik jQuery liugur
Ülimalt kompaktne liugur jQuery - tavalise liuguriga võrreldes palju suurema funktsionaalsusega karussell. See sisaldab ühe pildi eelvaadet, mitme pildiga karussellekraani ja pealkirjapõhist liugurit.
Näited | Lae alla
Öökulli karussell - Jquery liugur - karussell
Owl karussell on puutetundliku ekraaniga toega liugur, mis on hõlpsasti manustatav HTML-koodi. Pistikprogramm on üks parimatest liuguritest, mis võimaldab teil luua ilusaid karusselle ilma spetsiaalselt ettevalmistatud märgistusteta.
Näited | Lae alla
3D galerii - karussell
Kasutab CSS-i stiilidel ja mõnel Javascripti koodil põhinevaid 3D-üleminekuid.
Näited | Lae alla
3D-karussell, kasutades TweenMax.js ja jQuery
Suurepärane 3D-karussell. Tundub, et see on endiselt beetaversioon, sest avastasin sellega praegu paar probleemi. Kui olete huvitatud oma liugurite testimisest ja loomisest, on sellest karussellist palju abi.
Näited | Lae alla
Karussell bootstrapi abil
Tundlik karusselliliugur, kasutades alglaadimistehnoloogiat, sobib just teie uue veebisaidi jaoks.
Näited | Lae alla
Põhineb Bootstrap - Moving Box karussellliuguri raamistikul
Enim nõutakse portfelli ja ärisaitidel. Seda tüüpi karusselliliugurit leidub sageli mis tahes tüüpi saitidel.
Näited | Lae alla
Pisike ringiliider
See pisike liugur on valmis töötama mis tahes ekraani eraldusvõimega seadmetes. Liugur võib töötada nii ringikujulises kui ka karussellirežiimis. Pisike ring on esitatud alternatiivina teistele sarnastele liuguritele. IOS-i ja Android-i operatsioonisüsteemidele on sisseehitatud tugi.
Ringrežiimis näeb liugur päris huvitav välja. Pukseerimistoetus ja slaidide automaatse kerimise süsteem on suurepäraselt rakendatud.
Näited | Lae alla
Thumbelina sisu liugur
Võimas, tundlik ja karusselliga liugur sobib suurepäraselt kaasaegsele veebisaidile. Töötab õigesti igas seadmes. Tal on horisontaalsed ja vertikaalsed režiimid. Selle suurus on viidud 1 KB-ni. Ülimalt kompaktsel pistikprogrammil on ka suurepärased sujuvad üleminekud.
Näited | Lae alla
Vau - liugur - karussell
Sisaldab üle 50 efekti, mis aitavad teil oma veebisaidile originaalse liuguri luua.
Näited | Lae alla
Reageeriv jQuery sisu liugur bxSlider
Muutke brauseriakna suurust, et näha, kuidas liugur kohaneb. Bxslideril on üle 50 kohandamisvaliku ja see tutvustab oma funktsioone erinevate üleminekuefektidega.
Näited | Lae alla
jCarousel
jCarousel on jQuery pistikprogramm, mis aitab teil pildi eelvaadet korraldada. Näites näidatud alusest saate hõlpsalt luua kohandatud pildikarusselle. Liugur on tundlik ja optimeeritud töötama mobiilplatvormidel.
Näited | Lae alla
Kerimiskast - jQuery pistikprogramm
Scrollbox on kompaktne pistikprogramm liuguri - karusselli või teksti kerimisjoone loomiseks. Põhifunktsioonide hulka kuulub vertikaalne ja horisontaalne kerimine koos pausi abil hiirega.
Näited | Lae alla
dbpasCarousel
Lihtne liugur - karussell. Kui vajate kiiret pistikprogrammi, teeb see 100%. Kaasas ainult liuguri toimimiseks vajalikud põhifunktsioonid.
Näited | Lae alla
Flexisel: tundlik JQuery liuguri pistikprogramm - karussell
Flexiseli loojad said inspiratsiooni vana kooli jCarouseli pistikprogrammist, tehes selle koopia, mis keskendus liuguri õigele toimimisele mobiilseadmetes ja tahvelarvutites.
Mobiilseadmetega töötamisel erineb Flexiseli tundlik paigutus brauseriakna suurusele orienteeritud paigutusest. Flexisel on suurepäraselt kohandatud nii madala kui ka kõrge eraldusvõimega ekraanidel töötamiseks.
Näited | Lae alla
Elastislide - reageeriv liugur - karussell
Elastislide kohandub suurepäraselt seadme ekraani suurusega. Saate määrata minimaalse kuvatavate piltide arvu kindla eraldusvõimega. Töötab hästi pildigalerii karusselliliugurina, kasutades fikseeritud ümbrist koos vertikaalse kerimise efektiga.
Näide | Lae alla
FlexSlider 2
Woothemesi vabalt ümberjagatav liugur. Seda peetakse üheks kõige paremini reageerivaks liuguriks. Pistikprogramm sisaldab mitut malli ja on kasulik nii algajatele kasutajatele kui ka asjatundjatele.
Näide | Lae alla
Hämmastav karussell
Amazing Carousel on tundlik jQuery pildi liugur. Toetab paljusid saidihaldussüsteeme nagu WordPress, Drupal ja Joomla. Toetab ka Androidi ja IOS-i ning lauaarvutite operatsioonisüsteeme ilma ühilduvusprobleemideta. Sisseehitatud hämmastavad karussellimallid võimaldavad teil kasutada liugurit vertikaalses, horisontaalses ja ümmarguses režiimis.
Näited | Lae alla
