Hvordan Auto Refresh Visse Nett Bilder

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.