Turinys
Mes ketiname sukurti slankiklį, sukurtą kartu su
Jquery Y
„Nivo Slider“, be papildinio ir kad mes galime prisitaikyti prie savo svetainės.
Norėdami tai padaryti, mes naudosime
Jquery sistema, kuris yra a
biblioteką, kad būtų lengviau dirbti su „JavaScript“ kalba. Atsisiunčiame biblioteką iš
Jquery.com, taip pat įmanoma, kad galite jį naudoti traukdami
googleapis.com naudodami šį kodą savo html puslapyje, kad pridėtumėte šį scenarijų.
Jei atsisiuntėte jį iš „Jquery“ puslapio ir įkėlėte į savo svetainės katalogą, turite pateikti jį taip, kad nurodytų į jūsų domeną, kaip parodyta šiame pavyzdyje:
Dabar atsisiųskime
„Nivo“ slankiklis Kas yra
Jquery biblioteka, kuri leis mums sukurti slankiklį. Iš čia galite nemokamai atsisiųsti „Nivo“ slankiklį. Išpakuokite failą mūsų kataloge, čia matome žiniatinklio struktūrą.
Dabar savo svetainei sukursime failą index.html, antraštėje įdėsime bibliotekas ir stiliaus lapus. Galime pamatyti „Jquery“ biblioteką, „nivo“ slankiklių biblioteką ir paties „Nivo“ slankiklio stiliaus lapus, tada galime juos pritaikyti.
Dabar mes sukursime konteinerį savo vaizdams ir slankikliui, kad būtų galima jį parodyti, jis buvo sukurtas toje pačioje index.html (Jis taip pat gali būti sukurtas CSS stiliaus lapo faile, kad tiktų kiekvienas).
Mes pradedame nuo žiniatinklio struktūros ir paties slankiklio, įterpdami rodomus vaizdus ir pranešimą.
Tada mes suaktyviname „nivo Silder“ papildinį ir siunčiame jam parametrus apie efekto tipą, laiką tarp animacijos, pauzę tarp vaizdo ir daug kitų, kuriuos galima pamatyti „Nivo Slider“ dokumentacijoje.
Pastebėkime, kad ID yra suaktyvintas
#dailininkas ta pati, kur aš apibrėžiu vaizdus, taigi, jei noriu turėti daugiau nei vieną slankiklį, turėsiu pakartoti tą pačią struktūrą ir suaktyvinti ją atitinkamam ID.
„Index.html“ bandymo naršyklėje rezultatas yra toks:
Čia matome antrąją skaidrę, žemiau matome 1 ir 2 skaidrių skaičių ir numatytas nuorodas Ankstesnis (ankstesnis) Kitas (kitas) mes pagerinsime vaizdą naudodami css.
Mes galime pakeisti skaičius į kulkas paprasčiausiai žiūrėdami į nivo-silder.css
.nivo-controlNav {text-align: left; paminkštinimas: 0; padėtis: giminaitis; z-indeksas: 10; } .nivo-controlNav to {display: inline-block; plotis: 10 taškų; aukštis: 10 taškų; fonas: url (bullets.png.webp) no-pakartoti; teksto įtrauka: -9999 taškų; kraštas: 0; paraštė: 0 2px; } .nivo-controlNav a.active {fono padėtis: 0 100%; } .nivo-directionNav to {display: block; plotis: 30 pikselių; aukštis: 30 pikselių; fonas: url (arrows.png.webp) no-pakartoti; teksto įtrauka: -9999 taškų; kraštas: 0; viršuje: auto; apačioje: -36 taškų; z-indeksas: 11; } .nivo-directionNav a: užveskite žymeklį {background-color: #eee; -webkit-border-spindulys: 2px; -moz-border-spindulys: 2px; ribos spindulys: 2 taškų; } a.nivo-nextNav {fono padėtis: 160% 50%; dešinėje: 0 taškų; } a.nivo-prevNav {fono padėtis: -60% 50%; kairėje: auto; dešinėje: 35 pikselių; } Šio pakeitimo rezultatas bus skaičiai kaip kulkos į kairę ir nuorodos kaip rodyklės į dešinę.
Mes išplėsime funkcionalumą, parodydami duomenų bloką vienoje iš skaidrių
Keisdami jau turimą kodą, 2 skaidrės pastraipą pakeičiame bloku, kuriam paskambinsiu su ID # block2, tada sukuriu bloką ir taikau paslėptą stilių, kad jis būtų matomas tik suaktyvinus 2 skaidrę.
Rezultatas yra toks:
Taip pat galite įdėti miniatiūras. Kitas variantas yra dinamiškai generuoti turinį iš „mysql“ ir „php“ arba naudoti jį TVS šablone, pvz., „Joomla“ ar „WordPress“. Jame yra daug programuotų papildinių, tačiau su keliomis kodo eilutėmis galime sukurti savo komponentą. Tikiuosi, kad tai jums tarnavo.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
