Hvordan Auto Refresh Visse Nett Bilder
Ved hjelp av Javascript, kan du endre et bilde på en webside når som helst. Du kan ta med Javascript-kode på sidene dine for å lage bilder forandre på visse tidsintervaller, eller når en besøkende samhandler med spesifikke sideelementer. Den nødvendige koden er kort og lett å forstå, selv om du har ingen erfaring i klientsiden skripting eller programmering. Javascript kjører i en besøkendes nettleser og kan hente bilder fra en webserver og deretter vise disse bildene, og skaper en virtuell lysbildeserie, uten den besøkende å måtte oppdatere nettsiden.
Bruksanvisning
1 Forbered alle bildene du har tenkt å vise, beskjæring dem til omtrent samme størrelse, slik at hvert bilde vises i det samme området uten å forstyrre resten av websiden. Optimalisere bildene til minste mulige filstørrelsen for raskere lasting. Skriv ned en liste over dine bilde filnavn.
2 Opprett en ny webside med det første bildet du vil vise inkludert, som vist i følgende eksempel:
<Html>
<Head>
<Title> Min lysbildeserie </ title>
</ Head>
<Body>
<Div> <img alt = "bilde" /> </ div>
</ Body>
</ Html>
Endre "bilde1.jpg" til filnavnet på bildet. Send denne siden med en ".html" forlengelse. Plasser HTML-filen i samme mappe som bildene dine, enten på din egen datamaskin eller ved å laste opp siden og bildene til en webserver. Åpne siden i en nettleser for å kontrollere at de opprinnelige bildet vises.
3 Sett inn følgende Javascript-kode i hodet av HTML-dokumentet. Denne koden vil holde orden på bildene i lysbildeserien (change "bilde1.jpg", "bilde2.jpg" og så videre til dine egne bildefiler):
<Script type = "text / javascript">
// Endre filnavn som passer din egen
Var pic_array = new Array ( "bilde1.jpg", "bilde2.jpg", "image3.jpg");
// Endre num_pic verdi til antall bilder - dette eksempelet bruker 3
Var num_pics = 3;
Var current_pic = 0;
</ Script>
4 Utvide Javascript-kode for å endre bildene når brukeren beveger musepekeren over bildet området ved å legge til følgende kode rett før den avsluttende </ script> beskrevet i trinn 3.
fungere nextPicture ()
{Current_pic ++; if (current_pic> = num_pics) current_pic = 0;
document.getElementById ( "imageHolder") src = pic_array [current_pic].; }
Finn bildet element i websiden og endre HTML-koden som følger:
<Img id = "imageHolder" alt = "bilde" onmouseover = "nextPicture ();" />
"ID" attributt tillater skriptet å identifisere bildeelement på siden, og "onmouseover" funksjonen setter page up å oppdage brukermedvirkning. Endre "bilde1.jpg" til filnavnet på det første bildet som du vil vise. Test websiden i en nettleser, å bevege musen på og utenfor bildeområdet.
5 Alter koden din slik at bildene endrer automatisk på et bestemt intervall, for eksempel hvert 10. sekund. Fjern "nextPicture" -funksjonen i forrige trinn fra din Javascript-kode og erstatte det med følgende:
Var picTimer;
funksjons timePictures ()
{PicTimer = setTimeout ( "nextPicture ()", 10000); }
fungere nextPicture ()
{Current_pic ++; if (current_pic> = num_pics) current_pic = 0;
document.getElementById ( "imageHolder") src = pic_array [current_pic].; }
I tillegg må du endre bildeelement som følger, igjen i endring "bilde1.jpg" til selve filnavnet til det første bildet som du ønsker å vise:
<Img id = "imageHolder" alt = "bilde" onload = "timePictures ();" />
Den "onload" -funksjonen starter tidtakeren når nettsiden lastes inn i en brukers nettleser. Test din side igjen. Bildet vil endres automatisk hvert tiende sekund.
Hint
- Bruk gratis koden tilgjengelig på Internett for å bruke mer avanserte effekter på bildene på siden din. Mange Javascript kodeeksempler er tilgjengelig som du enkelt kan tilpasse til dine egne behov.
- Ikke overforbruk skript som automatisk oppdateres elementer på en webside, da dette vil forbruke mye båndbredde.