Hvordan Cycle flere effekter i JQuery

Hvordan Cycle flere effekter i JQuery


JQuery, en kraftig Javascript-bibliotek, hjelper nettstedeiere rundt om i verden bygger iøynefallende websider raskt. JQuery Cycle plugin, beskrevet av Cocy Lindley i "jQuery Cookbook", for eksempel, er en av mange gratis plugins du kan bruke til å utvide jQuery evner. Dette programtillegget gjør det mulig å lage en lysbildeserie som gjennomgår flere overgangseffekter automatisk på websiden. Selv om det hjelper å forstå jQuery når du bygger jQuery nettsteder, trenger du bare grunnleggende Javascript ferdigheter til å bruke jQuery Cycle plugin.

Bruksanvisning

1 Naviger til jQuery Cycle nedlastingssiden vert GitHub, og dobbeltklikk den første oppføringen i den viste listen for å åpne et dialogvindu Lagre. Klikk "Lagre" for å lagre filen på harddisken. Den første oppføringen inneholder den nyeste versjonen av plugin.

2 Lim inn følgende kode i hodet delen av en av HTML-dokumenter for å legge til jQuery biblioteket i dokumentet:

<Script type = "text / javascript" src = "& lt; / script" rel = "nofollow" target = "_blank"> https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min. js & quot;> & lt; / script>

3 Lim inn koden vist nedenfor, erstatte "Downloaded_File.js" med navnet på filen du lastet ned, etter at koden som er oppført i forrige trinn:

<Script src = "Downloaded_File.js" type = "text / javascript"> </ script>

4 Legg til følgende kode i dokumentets hoveddel, erstatte "bilde1.jpg" og "bilde2.jpg" med navnene på to bilder på harddisken:

<Div class = "MySlideShow">
<Img src = "bilde1.jpg" width = "280" height = "280" class = "første" />
<Img src = "bilde2.jpg" width = "280" height = "280" />
</ Div>

5 De første tre klassevelgere i følgende kode definere div container størrelse og skjule bilder. Den .mySlideshow img Velgeren lar deg justere grensen, background-color og polstring rundt bildene. Endre disse verdiene til noe du liker. Polstringen attributt, der verdien er 20px, avgjør hvor mye padding som vises mellom hvert bilde og beholderen. Denne verdien er i piksler. Bredden og høyden attributtverdier samsvarer med verdiene angitt i kroppen delen. Legg denne CSS-kode i dokumentet hode seksjon:

<Style type = "text / css">
.mySlideshow {width: 300px; height: 300px;}
.mySlideshow img {display: none}
.mySlideshow img.first {display: block}
.
MySlideShow img {
border-width: 2 piksler; border-color: blue; border-style: solid;
background-color: gul;
padding: 20px; bredde: 280 piksler; høyde: 280 piksler;
top: 0; venstre: 0;
}
</ Style>

6 Legg knapp som kaller en Javascript-funksjon kalt cycleEffects og passerer det navnet på en av de tilgjengelige effektene. Disse knappene også passere den hastigheten som det oppstår en overgangseffekt - 1000 millisekunder i eksempelet nedenfor - og antall millisekunder å vente før du viser neste bilde. Denne verdien, kjent som timeout, er 3000 i dette tilfellet. Legg disse knappe definisjonene under koden som vises i siste trinn:

<Input type = "button" value = "Fade zoom" onclick = "cycleEffects ( 'fadeZoom", "1000", "3000") "/>
<Input type = "button" value = "Shuffle" onclick = "cycleEffects ( 'shuffle', '1000', '3000')" />
<input type = "button" value = "kast" onclick = "cycleEffects ( 'kaste', '1000', '3000')" />

7 Legge til en funksjon som inneholder en syklus kommandoen til å kjøre den valgte effekten ved hjelp av fart og timeout verdiene som sendes til funksjonen. Lim cycleEffects funksjon i dokumentet manus seksjonen som vist nedenfor:

funksjons cycleEffects (effekt, effectSpeed, effectTimeout) {
$ ( '. MySlideShow'). Syklus ({
fx: effekt,
hastighet: effectSpeed,
timeout: effectTimeout
});

8 Lagre dokumentet og vise den i en nettleser.

9 Klikk på "Fade Zoom" -knappen for å starte lysbildefremvisningen. The Fade Zoom-effekten fører til nye bilder å fade inn og zoom for å erstatte eksisterende bilder. Klikk på andre knapper for å gjøre lysbilde vise andre effekter.

Hint

  • Du trenger ikke å bruke knappene til å utløse plugin. Ring cycleEffects funksjonen når som helst fra hvilken som helst Java uttalelse og gi det navnet på den effekten du ønsker å produsere. Forhånd listen over tilgjengelige effekter på JQuery Cycle Plugin Effects Browser webside.
  • Legg til flere bilder som trengs til MySlideShow div element.