Javascript-kode for en Fading Show

Opprette en webside sideshow krever bare noen små Javascript-funksjoner. Å gjøre sine lysbilder visne krever litt mer arbeid. Lysbildeserier, men vanlig i Internett, kan hjelpe deg å vise kunst, produkter eller rett og slett bildene du ønsker verden å se. Å gjøre en lysbilde fade ut før en annen vises gjør lysbildeserien skiller seg ut litt fra de andre på nettet. Hvis du forstår grunnleggende Javascript og HTML, kan du bygge din egen animerte lysbildeserie som fades mellom lysbilder.

setTimeout Funksjon

Javascript har en nyttig timerfunksjon som hjelper utviklere lage programmer som strekker seg fra det ordinære til avanserte spill som inneholder massevis av bevegelige objekter. SetTimeout funksjonen gjør dette mulig. En prøve linje med kode som starter denne funksjonen vises nedenfor:

setTimeout (functionToCall, forsinkelse)

Den functionToCall parameter inneholder av funksjonen du ringer for å vise lysbilder. Ved å gjøre funksjonskall annen funksjon rekursivt, kan det føre til en bestemt handling for å gjenta ubestemt tid. Denne type funksjon kommer i hendig når du trenger å gjøre en div element vise en kontinuerlig strøm av bilder som aldri slutter.

CSS Opacity

CSS-klasser inneholder attributter som styrer utseendet til et objekt på en webside. Hvis du oppretter en klasse som inneholder en tetthet attributt, kan du tilordne den klassen til en div container som viser dine lysbildeserier av bilder. Dette attributt verdier kan variere fra 0 prosent, hvor bildet er helt ugjennomsiktig, til 100 prosent hvor div og noe inni den er helt gjennomsiktig. Verdier mellom 0 og 100 prosent produsere gjennomsiktige gjenstander.

Endre Opacity og bilder

En måte å gjøre en div opasiteten endringen er å skape en funksjon som henter en referanse til div og forandrer sin opasitet verdi. Endre tettheten fra 50 prosent til 40 prosent, for eksempel, og div og dets bilde åpenhet vil redusere litt. Hvis du bruker Javascript getElementById funksjonen for å få en henvisning til div nåværende bilde, kan du endre bildets src verdi til et annet bilde. Å gjøre dette gjør ett bilde ser ut til å endre til en annen. Gjør det gamle bildet ser ut til å fade ut på samme tid å skape en falming lysbildefremvisning.

Innlemming Timeout Funksjon

På dette punktet, vil du ha en funksjon du kan ringe som kan erstatte ett bilde i en div med en annen. Alt du trenger nå er et objekt av bildenavnene at funksjonen kan sykle gjennom. Opprett et slikt objekt utenfor funksjonen når Web siden lastes. Et objekt som heter "myImages", for eksempel kan inneholde hele banen navnene på 10 bilder du ønsker skal vises i lysbildefremvisningen. Bruk en Javascript-image preloader funksjonen til å sørge for at de all last før presentasjonen begynner.

Sette alt sammen

Plasser en div tag i kroppen delen av hvor du vil at lysbildeserien skal vises. Plasser et bilde kode som definerer din slideshow første bilde inne som div. Gi div og img tag ID-verdier. Javascript-funksjonen trenger de å få referanser til disse stedene. Legg en setTimeout funksjon til slutten av Javascript-funksjonen og ha det ringe samme funksjon gjentatte ganger. Hver gang funksjonen kjører, vil det vise et nytt bilde. Før du endrer bildets src eiendom for å peke på det neste bildet, passerer navnet ofte det aktuelle bildet til funksjonen som gjør det visne. Når du viser websiden i en nettleser. en falming lysbildefremvisning vises.