Indholdsfortegnelse
Vi skal lave en skyder udviklet med
Jquery Y
Nivo Slider, uden behov for et plugin, og at vi kan tilpasse os vores websted.
For at gøre dette vil vi bruge
Jquery -rammer, som er en
bibliotek for at lette arbejdet med Javascript -sproget. Vi downloader biblioteket fra
Jquery.com, det er også muligt, at du kan bruge det ved at trække
googleapis.com ved hjælp af denne kode på din html -side til at tilføje dette script.
Hvis du har downloadet det fra Jquery -siden og uploadet det til et bibliotek på dit websted, skal du sætte det til at pege på dit domæne som følgende eksempel:
Lad os nu downloade
Nivo skyder hvad er
Jquery -bibliotek, der giver os mulighed for at oprette skyderen. Herfra kan du downloade Nivo -skyderen gratis. Pak filen ud i vores bibliotek, her kan vi se strukturen på nettet.
Nu skal vi oprette en index.html -fil til vores websted, i overskriften sætter vi bibliotekerne og typografiarkene. Vi kan se Jquery -biblioteket, niveau -skyderbiblioteket og Nivo -skyderens egne typografiark, så kan vi tilpasse dem.
Nu skal vi oprette en beholder til vores billeder og til skyderen, for dette og for at kunne vise det, blev den oprettet inden for samme index.html (Den kan også oprettes i en CSS -stilarkfil, der passer hver og en).
Vi starter med webens struktur og selve skyderen, indsætter billederne til visning og en besked.
Derefter aktiverer vi niveau Silder -pluginet og sender det parametre om typen af effekt, tid mellem animation, pause mellem billede og mange flere, der kan ses i Nivo Slider -dokumentationen.
Lad os se, at id'et er aktiveret
#silder den samme, hvor jeg definerer billederne, så hvis jeg vil have mere end en skyder, bliver jeg nødt til at replikere den samme struktur og aktivere den for det tilsvarende id.
Resultatet af at teste index.html i en browser er:
Her ser vi det andet dias, herunder ser vi antallet af dias 1 og 2, og standardlinkene Forrige (forrige) Næste (næste) skal vi forbedre visningen af det ved hjælp af css.
Vi kan ændre tallene til kugler blot ved at se på niveau-silder.css
.nivo-controlNav {tekstjustering: venstre; polstring: 0; position: relativ; z-indeks: 10; } .nivo-controlNav til {display: inline-block; bredde: 10px; højde: 10px; baggrund: url (bullets.png.webp) no-repeat; tekstindrykning: -9999px; grænse: 0; margen: 0 2px; } .nivo-controlNav a.active {baggrundsstilling: 0 100%; } .nivo-directionNav til {display: block; bredde: 30px; højde: 30px; baggrund: url (pile.png.webp) no-repeat; tekstindrykning: -9999px; grænse: 0; top: auto; bund: -36px; z-indeks: 11; } .nivo-directionNav a: svæve {baggrund-farve: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; grænse-radius: 2px; } a.nivo-nextNav {baggrundsstilling: 160% 50%; højre: 0px; } a.nivo-prevNav {baggrundsstilling: -60% 50%; venstre: auto; højre: 35px; } Resultatet af denne ændring vil være tallene som kugler til venstre og linkene som pile til højre.
Vi kommer til at udvide funktionaliteten ved at vise en blok af data i et af diasene
Ved at ændre den kode, som vi allerede har, ændrer vi afsnittet i dias 2 for en blok, som jeg vil kalde med en id # blok2, derefter opretter jeg blokken og anvender en skjult stil, så den kun er synlig, når dias 2 er aktiveret.
Resultatet er som følger:
Du kan også sætte miniaturebilleder. En anden mulighed er at generere indholdet dynamisk fra en mysql og php eller bruge det i en CMS -skabelon såsom joomla eller wordpress. Det leveres med mange plugins, der allerede er programmeret, men med et par linjer kode kan vi oprette vores egen komponent. Jeg håber, det har tjent dig.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
Du vil bidrage til udviklingen af hjemmesiden, at dele siden med dine venner
