Hvordan man laver en webside billede ændre sig med tiden

May 23

Hvordan man laver en webside billede ændre sig med tiden

Websider bruger JavaScript-kode til at lave forskellige ting til at ske med faste tidsintervaller. Dette er Client Side kode, og derfor finder sted i webbrowseren, udførelse som den besøgende ser og interagere med din side. Ændring billeder gør oplevelsen af ​​visning af en webside mere dynamisk, og det er en effekt, der er let at implementere og kræver kun en lille mængde af JavaScript-kode for at kunne fungere.

Vejledning


1. Forbered dine billeder. Sørg for, at web-billeder er beskåret til den korrekte størrelse, helst alle samme størrelse, så de effektivt kan vises i dine websider uden at forstyrre de andre indhold. Prøv at minimere filstørrelser, holde dem så små som muligt, samtidig med at sikre, at de er stadig god kvalitet. Giv dine billeder navne, der afspejler nogle numerisk rækkefølge (for eksempel "pic1.jpg" og derefter "pic2.jpg"), så den eneste identificerbare træk er antallet.

• Opret din webside ved hjælp af HTML-strukturer. Brug følgende skitse, ændre billedets filnavn der passer til din egen: <html> <head> </ head> <body> <div> <img id = "billede" src = "pic1.jpg" alt = "billede" /> </ div> </ body> </ html> I dette tilfælde skal billederne være i samme mappe som websiden. Strukturen oprindeligt holder det første billede, der skal vises.

• Føj JavaScript-kode til at holde tiden. Indsæt følgende i din side hoved sektion: <script type = "text / JavaScript"> var currPic = 1; Var totPics = 3; Var holde Tid; funktion setupPicChange () {keepTime = setTimeout ("changePic ()", 5000); } Funktionen changePic () {currPic ++; hvis (currPic> tot Pics) currPic = 1; . ". jpg" document.getElementById ("billede") src = "pic" + currPic +; setupPicChange (); } </ Script> Ændr "totPics" nummer, der passer uanset hvor mange billeder, du har.

• Indstil side for at starte timeren. Føj til din side krop element som følger: <body onLoad = "setupPicChange ();"> Dette gør timeren starte, når siden indlæses. Efter fem sekunder billedet ændres til den næste i rækken, og timeren begynder at holde tælle igen. Sekvensnummeret startes ved 1 og øges hver gang timeren løber ud, så billedet skifter kilde attribut til den næste i rækken. Alternativt navngive dine billeder, uanset hvad du kan lide og gemme deres filnavne i et array, looping gennem denne i stedet for at bruge en sekvens nummer.

• Lyt til interaktiv kommunikation med din webside. Afhængigt af formålet med din side, kan du ønsker at ændre den måde, det fungerer som brugeren interagerer med det. For eksempel for at stoppe billedet fra skiftende mens brugeren har sin mus svævede over det, tilføje følgende til dit billede kode: <img id = "billede" src = "pic1.jpg" alt = "billede" onmouseover = "stop Timer (); " onmouseout = "start Timer ();" /> Tilføj til JavaScript: funktion Stop ur () {klar Timeout (keepTime); } Funktionen starter Timer () {keepTime = setTimeout ("changePic ()", 5000); }