June 7
JavaScript è spesso usato per produrre effetti dinamici sulle pagine Web non possibile con il solo HTML. JavaScript offre un sacco di controllo sugli elementi della pagina, anche dopo che è stato caricato. Ad esempio, è possibile modificare l'attributo "src" di un tag "img" per scambiare un'immagine sulla pagina. Espandere questa azione per creare una presentazione di foto per i visitatori del tuo sito web.
1 Inserire il seguente codice JavaScript tra i tag "testa" del documento HTML:
<Script type = "text / javascript">
var Photosets = {
slideshow1: [0, [ "dog.jpg", "cat.jpg", "horse.jpg", "snake.jpg"]],
slideshow2: [0, [ "Apple.jpg", "banana.jpg", "grape.jpg", "melon.jpg", "berry.jpg"]]
};
rotatePhotos funzione (id) {
document.getElementById(id).src = photosets[id][1][photosets[id][0]];
photosets [id] [0] + = 1;
Photosets [id] [0] =% photoset [id] [1] .length;
}
</ Script>
Modificare il "photoset" dichiarazione di variabile per impostare le presentazioni. Dare ad ogni slideshow un nome univoco (ad esempio, "slideshow1," "slideshow2", ecc), seguito da due punti. Elencare i nomi dei file delle foto nella presentazione all'interno del set interno di parentesi quadre, racchiusi tra virgolette e separati da virgole. Ogni presentazione può essere lungo quanto si desidera. presentazioni separati da virgole come mostrato.
2 Aggiungere il seguente codice al corpo del documento HTML per inserire la presentazione sulla pagina:
<Img id = "slideshow1" />
<Input type = valore "pulsante" = "Foto successiva" onclick = "rotatePhotos ( 'slideshow1');" />
Ripetere questo codice per ogni presentazione che si desidera mettere sulla pagina, cambiando i nomi presentazione nella "img" e tag "input" per specificare la presentazione che si desidera.
3 Salvare la pagina e caricare in un browser Web. Fare clic sul pulsante per far avanzare la presentazione. Le presentazioni sono vuoti in un primo momento; aggiungere le chiamate della funzione "rotatePhotos" in l'attributo "onLoad" del tag "corpo" per inizializzare quando la pagina viene caricata. Per esempio:
<Body onload = "rotatePhotos ( 'slideshow1'); rotatePhotos ( 'slideshow2');">